Multiple layouts using `Router`

Hi, I cant figure out how to do nested layouts like this

 <SidebarProvider>
       <SiderBar />
       <Router> 
        <Router> 
         {routes.map((route) => (
           <Route path={route.path} component={route.component} />
         ))}
       </Router>
       </Router>
        <Router root={DashboardLayout}>
          <Route path={routes[4].path} component={routes[4].component} />
        </Router>
      </SidebarProvider>

 <SidebarProvider>
       <SiderBar />
       <Router> 
        <Router> 
         {routes.map((route) => (
           <Route path={route.path} component={route.component} />
         ))}
       </Router>
       </Router>
        <Router root={DashboardLayout}>
          <Route path={routes[4].path} component={routes[4].component} />
        </Router>
      </SidebarProvider>

The issue with this setup is that I get an error from root={DashboardLayout} and I see the 404 page an the , probably because Router is used twice I don't know how to implement this without using Router twice, and how to prevent the error

4 Replies

Brendonovich•2w ago

Use a single Router with nested Route components

<Router>
  {routes.map((route) => (
    <Route path={route.path} component={route.component} />
  ))}
  <Route component={DashboardLayout}>
    <Route path={routes[4].path} component={routes[4].component} />
  </Route>
</Router>

<Router>
  {routes.map((route) => (
    <Route path={route.path} component={route.component} />
  ))}
  <Route component={DashboardLayout}>
    <Route path={routes[4].path} component={routes[4].component} />
  </Route>
</Router>

oCarrottOP•2w ago

The component for Route, doesnt work

Brendonovich•2w ago

can you elaborate?

oCarrottOP•2w ago

I solved the issue now, I think it had something to do with my styling, so it did work but I couldn’t see it Thanks for the help though, much appreciated

Gaming

Programming

Multiple layouts using `Router`