1

I would like to use new React router loader features, but I cannot figure out how to convert it in my application.

I used Route in multiple components but since new ReactProvider needs whole tree of routes in prop I don't know how to solve it.

So far I use v6 BrowserRouter with nested routes rendering Layout on the top level.

<BrowserRouter>
  <Routes> 
    <Route element={<Layout />}> 
      <Route index element={<Dashboard />} />
      <Route path="section-a/part1" element={<SomePage />} />
      <Route path="section-a/part2" element={<AnotherPage />} />
      <Route path="section-b" element={<DifferentPage />} /> 
    </Route> 
  </Routes>
</BrowserRouter>

In Layout I render SideBar which have static part which I want to appear at all times and don't want it to rerender when changing route, and dynamic part which have it's own routing and behavior when changing route.

const Layout = () => (
  <>
    <AppBar/>
    <SideBar>
      <StaticNavigation/>
      <DynamicSubnavigation /> 
    </SideBar>
    <Outlet/>
  </>
);

const DynamicSubnavigation = () => (
  <Routes>
    <Route element={<Layout />}>
      <Route index element={<DashboardSideBar />} />
      <Route path="section-a" element={<SectionASideBar />} />
      <Route path="section-b" element={<SectionBSideBar />} />      
    </Route>
  </Routes>
);

I don't see how I can implement this using new RouterProvider and createBrowserRouter. In docs they say that we need only one router but since it is passed as prop to ReactProvider it doesn´t help me. Only solution I see is to rerender whole SideBar and add it to nested routes, but I really don't wanna do that. Rerendering of the static part of the SideBar would cause me different problems.

Vláďa Čajka
  • 11
  • 1
  • Route declaration didn't change really in RRDv6.4, only the Data APIs were added. Are you trying to use any of the new Data APIs? Or are you just trying to use the `createBrowserRouter` utility? What you have already should still work even in RRDv6.4. What is the issue? Can you share the `StaticNavigation` component as well? I'm sure there's a way to reconfigure this all into a single routes config. – Drew Reese Dec 02 '22 at 16:40
  • https://stackoverflow.com/questions/72278370/how-to-add-navbar-and-a-sidebar-inside-the-react-router-v6-routes Does this answer your question? – DreamBold Dec 02 '22 at 16:50
  • If you are wanting/trying to use the new RRDv6.4 Data APIs then I think we need to see a [mcve] for *that* implementation you would be using. – Drew Reese Dec 02 '22 at 17:09
  • Yes I want to implement new Data APIs, that is only reason why I want to use new createBrowserRouter. StaticNavigation component is quite big component tree, which I don't want to rerender. I will try to attach some minimal reproducible example. – Vláďa Čajka Dec 02 '22 at 17:32
  • I don't know what you mean by "rerender" with regards to the sidebar or `StaticNavigation` component. These will rerender when they need to when the route changes. Like I said, I think this is doable, but the first hitch I ran into is the route conflict between `Dashboard` and `DashboardSideBar` both trying to render on `"/"`. Only 1 route can match per URL path. Having a greater view of *all* the routes (and paths) would be helpful. Also, you can still render descendent routes if they don't specifically need to use any of the Data APIs. Two `Routes` can render duplicate routes. – Drew Reese Dec 02 '22 at 17:40

0 Answers0