<AbsoluteRoutes> #12959
Description
RFC: #9841
In v5 deeply nested <Route path="/absolute/path"> matched the parent portion of the URL, but in v6 deeply nested <Routes> build upon the previous path and won't match an absolute path.
To facilitate easier migrations to v6 as well as allow people to have centralized route tables with absolute paths, you can use <AbsoluteRoutes> as a replace for <Routes>.
For example:
// High up the tree:
<Routes>
<Route path="admin/*" />
</Routes>
// ✅ deeper in the tree uses relative paths that build on /admin/
<Routes>
<Route path="users" />
<Route path="settings" />
</Routes>
// ❌ does not work today
<Routes>
<Route path="/admin/users" />
<Route path="/admin/settings" />
</Routes>
// ✅ will work now with AbsoluteRoutes
<AbsoluteRoutes>
<Route path="/admin/users" />
<Route path="/admin/settings" />
</AbsoluteRoutes>Again, this will facilitate migrations from v5 as well as allow folks to use centralized route tables:
const routes = {
admin: "/admin/*",
users: "/admin/users/:userId"
}
<Routes>
<Route path={routes.admin} />
</Routes>
// and then inside the tree of the admin route
<AbsoluteRoutes>
<Route path={routes.users} />
</AbsoluteRoutes>