Closing in on a decade of client-side routing, React Router v6 takes the best features from previous versions—and its sister project, Reach Router—in our smallest and most powerful package yet.
Most apps have a series of nested layouts around the main sections of the page. These layouts are nearly always coupled to URL segments.
Every app has some root layout that is always rendering, that part is easy no matter what router you're using.
But as segments are added to the URL, new layouts are added to the UI.
Sometimes it gets pretty deep, and you have to repeat these layout hierarchies across all routes in the app.
It's not uncommon to have four levels of layouts!
With React Router, this is all built-in. Nested routes add both segments to the URL and layouts to the UI hierarchy. As the URL changes, your layouts automatically change with it.
Sometimes a URL like can match more than one route pattern. React Router ranks your routes and picks the best one.
If you are visiting https://myapp.com/teams/new
, React Router will render <NewTeam />
because it's more specific than the :teamId
parameter. No more messing with exact
props or careful (but fragile) route ordering!
<Routes>
<Route
path="teams/:teamId"
element={<Team />}
/>
<Route
path="teams/new"
element={<NewTeam/>}
/>
</Routes>
<Routes>
<Route path="teams/:teamId" element={<Team />} />
<Route path="teams/new" element={<NewTeam />} />
</Routes>
React Router is developed by the Remix team. To get updates and special content on React Router (as well as our other projects), subscribe to the Remix newsletter or join the conversation on Discord.
We respect your privacy, unsubscribe at any time.