RouterProvider with sidebar?

[eeston]

Hello,

Looking through the docs, it looks like the new <RouterProvider /> can't be used to wrap any children? I have an app with a sidebar and a map view as noted below. As far as I have been able to figure out, there isnt an equivelent with the new data fetching routers?

main.tsx

root.render(
      <HashRouter>
            <App />
      </HashRouter>
);

App.tsx

<>
   <aside>
       <Routes location={location} key={location.pathname}>
               <Route path="/routeA"  element={<RouteA} />} />
               <Route path="/routeB"  element={<RouteB} />} />
               <Route path="/routeC"  element={<RouteC} />} />
      </Routes>
   </aside>
   <MapBox />
</>

I have the router wrap the entire application but the routes/elements are nested within the <aside /> component. The reason I went for this approach was to allow the <MapBox /> component to use the router hooks like useLocation() & useNavigate() so that the URL could be used to trigger map annimations. This also guarantees that the <MapBox /> component is never rerendered when the route changes.

Has anyone had any experience with a similar setup?

[ryanflorence]

The tutorial has a sidebar.

https://reactrouter.com/en/6.4.3/start/tutorial#nested-routes

[eeston]

Ta Ryan! I didnt spot that one but I did get some advice on the discord channel shortly after posting. Sorry I should have come back to update this post 🤦‍♂️