how to do navigate submenu items using React Router Dom v6

0

Issue

i’m creating a react app that contains sidebar with sub items.

i want to open and components under manage/ url ( like manage/sub1, manage/sub2 ).

i tried to create a nested route inside /manage but it’s redirecting to again to /manage. is there any way to do this?

const App = () => (
  <div>
    <Routes>
      <Route path="/" element={<PublicRoute />}>
        <Route path="login" element={<Login />} />
      </Route>

      <Route path="/" element={<PrivateRoute />}>
        <Route path="dashboard" element={<Dashboard />} />
        <Route path="manage" element={<Manage />} />
        <Route path="sub1" element={<Sub1 />} />
        <Route path="sub2" element={<Sub2 />} />
      </Route>

    </Routes>
  </div>
);

my sidebar navigation code

<NavItem link="/manage" icon={HappinessIcon} label="Manage" hasSubItem>
 <div>
    <NavSubItem link="/sub1" label="Sub Item 1" />
    <NavSubItem link="/sub2" label="Sub Item 2" />
 </div>
</NavItem>

Solution

after reading the v6 documentation i figured out nesting won’t help me in this situation. i just need to add manage/ in front of all the sub items.

<Route path="manage/sub1" element={<Sub1 />} />
<Route path="manage/sub2" element={<Sub2 />} />

on my sidebar navigation code

<NavItem link="/manage" icon={HappinessIcon} label="Manage" hasSubItem>
 <div>
    <NavSubItem link="/manage/sub1" label="Sub Item 1" />
    <NavSubItem link="/manage/sub2" label="Sub Item 2" />
 </div>
</NavItem>

that’s all i had to do, if you know any clean solution than this let me know.

Answered By – Nivethan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More