Update route info on click
I have a button which opens a slider (sheet component) from the right side. I also would like to update the route once clicked on it, since I am not opening a page.
Currently I am doing this on button click
But that does not quiet work, it does not open the sheet anymore, seems like it tries to go to the page.
How can I make this work?
Also what do you think of this behavior is it fine to update the route even if I am not changing the path?
7 Replies
If you are staying at the same page then best not to update the route imo, just add a query param to the url (sidebar=open) for instance.
@Yiannis The sidebar has 4 section which I can click, I thought of updating the route there aswell so I would have something like
/dashboard/overview/analytics, /dashboard/overview/foo etc.
Or something like this?
/dashboard?tab=overview&subtab=analyticsIf you want to stay on the same page i would use this
If you want to move to a new page when you open the side nav for some reason you can use a Link or router.push
ok sounds good to me ty
If you move the state of the side bar to the url then if clikcing on any of the items on it takes you to a new page you can easily have the side bar open without messing with any useEffects or state managers
ByteGrad
YouTube
STOP using useState, instead put state in URL (in React & Next.js)
👉 NEW React & Next.js Course: https://bytegrad.com/courses/professional-react-nextjs
👉 Professional JavaScript Course: https://bytegrad.com/courses/professional-javascript
👉 Professional CSS Course: https://bytegrad.com/courses/professional-css
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (NEW...
if you're using app router then paralell routes might be useful to you: https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
Routing: Parallel Routes | Next.js
Simultaneously render one or more pages in the same view that can be navigated independently. A pattern for highly dynamic applications.