Nested routing in react router V6

Time:2022-5-14

There are many articles about how to achieve the effect of route nesting through < route > nesting in react router V6. This paper introduces how to realize nested routing through route table

Nesting in V5 routing table

To use the routing table in V5, you need to install another packagereact-router-config, create a router configuration file of JS type, as follows:

Nested routing in react router V6

And used in components that need to use routingrenderRoutes(routes)Render route as follows

Nested routing in react router V6

take/discoverPage as an example, in order to achieve the effect of nested routing, you need to<HYDiscover>Reuse in componentsrenderRoutes(props.route.routes)Render the sub route as follows:

Nested routing in react router V6

Nesting in V6 routing table

It is different in V6, and there is no need to install it in V6react-router-configPackage, officially implementedreact-router-configRefer to upgrading from V5 for related functions

To create a routing table in V6, you need to create the table as a functional component and useuseRoutes(routes)Hook, last returnuseRoutes(routes)The return value of, whereroutesThere are also some differences in the attributes and writing methods in, as follows:

Nested routing in react router V6

Also with/discoverFor example, when I use nested routing, I still want to passprops.route.routesTo achieve, and later throughconsole.log(props)Did you find itrouteProperty, so go to upgrading from V5react-router-configRelevant content, learned that in<Discover>Used in components<Outlet>Components can be realized as follows:

Nested routing in react router V6

reference resources

[1] Upgrading from v5 https://github.com/remix-run/…