How Can I Update State To The Correct Value Depending On Which Page A User Enters Through/Reloads To
Answered
Eurasian Collared-Dove posted this in #help-forum
Eurasian Collared-DoveOP
Hey, I have a navbar I'm working on currently and the buttons have state to highlight them when they are clicked, adding the highlight on click is pretty simple by using a state defined by an enum page either HOME = "home" or LOGIN="login" etc, however when the page is reloaded the state does not persist as well as when loading into the application through a route like localhost:3000/login has the default home nav tab selected. Is there any way to read the URL in my layout page and set a state variable based upon which page a user is on? I can provide code if my description is lackluster. Any and all help is very greatly appreciated! Thank you!
Answered by @ts-ignore
You need [usePathname](https://nextjs.org/docs/app/api-reference/functions/use-pathname) hook
3 Replies
Eurasian Collared-DoveOP
Basically can I make my state global so I can set it on each individual page initially, or is there a function to read the URL from inside of my navbar.tsx which is referenced on my layout.tsx page?
@Eurasian Collared-Dove Hey, I have a navbar I'm working on currently and the buttons have state to highlight them when they are clicked, adding the highlight on click is pretty simple by using a state defined by an enum page either HOME = "home" or LOGIN="login" etc, however when the page is reloaded the state does not persist as well as when loading into the application through a route like localhost:3000/login has the default home nav tab selected. Is there any way to read the URL in my layout page and set a state variable based upon which page a user is on? I can provide code if my description is lackluster. Any and all help is very greatly appreciated! Thank you!
You need [usePathname](https://nextjs.org/docs/app/api-reference/functions/use-pathname) hook
Answer
Eurasian Collared-DoveOP
Bet, some fiddling with it works, thank you so much!