Same side panel on different routes
I have an app where I'm dealing with different kinds of tasks. Whenever I click on a task, I need a side panel to open up where I can edit the task.
I need the same panel on routes /a/b/c as well as /d/e.
What would be the most general way to build such a panel and activate it?
3 Replies
are you using nextjs? if so are you using /app or /pages router?
for app router - use https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#layouts
for pages - it's trickier, you can check this https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#single-shared-layout-with-custom-app
to keep state up to date between different pages - you need a global state - checkout Redux, Zustand or even React Context with reducers
https://redux.js.org/
https://zustand-demo.pmnd.rs/
https://react.dev/learn/passing-data-deeply-with-context -> https://react.dev/learn/scaling-up-with-reducer-and-context
I am not using Next unfortunately - using react router. I thought about that but wanted to have a shareable link for the task which when gone to, has the task opened in the side panel
https://reactrouter.com/en/main/start/overview#nested-routes
can you share your routes setup?
it is possible though
you can use dynamic parameters and pass them to the element as props