[Docs]: Nested Routes are essentially undocumented about react-router HOT 5 CLOSED

A quick search shows they are documented in a handful of places. We're always open to improvements so if you have specific suggestions of how they could be better surfaced please let us know!

https://reactrouter.com/en/main/start/overview#nested-routes
https://reactrouter.com/en/main/start/tutorial#nested-routes
https://reactrouter.com/en/main/routers/create-browser-router#routes
https://reactrouter.com/en/main/components/outlet

from react-router.

I looked at the documentation at the links you provided.

Honestly I probably looked at that documentation whilst I was searching and it looks nothing like nested routes to me.
There is no clear and simple explanation of how for example I can have routes in a separate component.

from react-router.

Ah ok - I see the confusion now. You're not talking about what we call "Nested Routes" which is nesting UI based on the URL via <Outlet>. You're referring to what we call "Descendant Routes" which lets you define and render additional <Route> components deep in the tree via <Routes>.

These are somewhat intentionally less documented as they're an older pattern that is no longer recommended since it encourages data fetching waterfalls. The new Data APIs (createBrowserRouter/RouterProvider) decouple fetching from rendering which can lead to much better app performance. Routes rendered via descendant <Routes> cannot leverage the Data APIs. See Picking a Router for more info.

One of the biggest reasons folks reached for descendant <Routes> in prior versions was to code split sections of the route tree out of the critical bundle. When using the data APIs, we recommend using route.lazy which gets you most of the way there and if that doesn't go far enough, we've recently released a new feature we call "Fog of War" that leys you lazily load entir eportions of the route tree: in unstable_patchoutesOnMiss that may be of interest.

I would also suggest checking out the When to Fetch conference talk from Ryan and there two blog posts (post, post) for more information on this move towards the Data APIs

from react-router.

Just not documenting a common pattern because it's frowned upon is less effective than discussing it and the issues.

from react-router.

It is documented, here and in the <Routes> component. And the downsides are called out on the <Routes> component docs:

Do you have any specific feedback on where we could better explain this?

from react-router.