Skip to content
React Router

React Router
v6 is Here

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.

Read the DocsStart the Tutorial

Used by dev teams at top companies

Nested Routes

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.

Learn More about Nested Routes
Current URL: about:blank

Ranked Routes

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>
GitHub Users
2.4m
Contributors
600+
npm Downloads
3.6m
of React Apps
70%