CODEWITHSUNDEEP
reactjsreact-router
Nipun Ravisara
Nipun Ravisara

Reputation: 4431

Sidebar not updating on manual URL route change in react router

I'm having a create-react-app application of dashboard with react router. When i click on sidebar item it navigate to the relevant page and it's working fine. but If i manually change the URL to another page, sidebar menu item related to that page not getting highlighted.

I'm saving current route path in global state on menu item click. after in Menu component I'm getting currently selected route by accessing global state, I'm passing it to selectedKeys so the menu item gets highlighted when click on menu item. It's working fine. But If i update the path from browser URL bar the page is rendering correctly but the sidebar item not getting highlighted.

What I want is a way to identify manual URL changes in browser and run a function on that. so that i can set current path using localStorage.getItem

<SideBar>
  <Menu selectedKeys={[localStorage.getItem("dashboardRoutes")] || "/dashboard"}>
    {routes.map(route => (
      <Menu.Item
       onClick={() =>
           localStorage.setItem(route.path)
       }>
         {route.name}
      </Menu.Item>
    ))}
  </Menu>
</SideBar>

Upvotes: 0

Views: 985

Answers (1)

zimmerbimmer
zimmerbimmer

Reputation: 948

If you want your page to be updated by the URL after hard refresh, you must capture the value (slug, id, etc. whatever it is) from the useParams hook. Then in a useEffect hook that would run only once when your application loads (meaning you need to pass an empty array as a dependency), handle the initial highlighting manually.

If you add your code on your Sidebar component, I might be able to help better.

Upvotes: 1

Related Questions