What's new in React Router 6?

React creates single-page applications. In single-page applications, it is important to display multiple views without having to reload the browser. React Router plays an important role in managing this. It is the most popular lightweight, fully-featured routing library for React.

The latest release of React Router 6, has created a lot of buzz in the React community.

In this blog, we will look into some of the new changes in React Router 6.

More compact and elegant

React Router v6 was built from scratch using React hooks. It helped the v6 code to be more compact and elegant than the v5 code.

Smaller bundle size

In v6 the minified gzipped bundle size dropped by more than 50% ! React Router now adds less than 4kb to our total app bundle. With tree shaking enabled, the actual results will be even smaller.

Routes replaces Switch

<Switch> is replaced with <Routes>. Routes component has a new prop called element, where we can pass the component it needs to render. Instead of scanning the routes in order, <Routes> automatically picks the best one for the current URL.

Let us take the example of Blogs.

//v5
<Switch>
  <Route path="blogs/:slug" component={Blog} />
  <Route path="blogs/new" component={NewBlog} />
</Switch>

The way these routes are ordered matters a lot if we are using Switch. The Route element with param slug will also catch the /blog/new route and, the Blog component will be rendered instead of NewBlog. We can probably fix this issue by adding exact to the <Route>.

Now let’s modify the same example to use Routes.

//v6
<Routes>
  <Route path="blogs/:slug" element={<Blog />} />
  <Route path="blogs/new" element={<NewBlog />} />
</Routes>

With this change, we don’t need to worry about the order anymore because Routes picks the most specific routes first based on the current URL.

Relative Links

Earlier, we had to specify the entire path in the Link. But now, the path of a Link is relative to the path of Route that rendered it.

import {
  Routes,
  Route,
  Link,
  Outlet
} from "react-router-dom";

function Blogs() {
  return (
    <div>
      <h1>Blogs</h1>
      <nav>
        <Link to="new">New Blog</Link>
      </nav>
      <hr />
      <Outlet />
    </div>
  );
}

function Blog() {
  return <h1>Blog</h1>;
}

function NewBlog() {
  return <h1>New Blog</h1>;
}

function App() {
  return (
    <Routes>
      <Route path="blogs" element={<Blogs />}>
        <Route path=":slug" element={<Blog />} />
        <Route path="new" element={<NewBlog />} />
      </Route>
    </Routes>
  );
}

The Link in the above example will link to /blogs/new because it’s rendered inside <Blogs>. Also, we don’t need to change the path if we ever change the parent URL.

Keep in mind that Relative <Link to> values do not begin with /!

Nested Routes

With React Router 6, we can now nest our Routes inside one another, and their paths will nest too.

function App() {
  return (
    <Routes>
      <Route path="blogs" element={<Blogs />}>
        <Route path=":slug" element={<Blog />} />
        <Route path="new" element={<NewBlog />} />
      </Route>
    </Routes>
  );
}

It makes our layout code more manageable.

Index Routes

Index route is a child route with no path that renders in the parent’s outlet at the parent’s URL.

Another way to think of index routes is that it’s the default child route when the parent matches but none of its children do. Mostly we might not need an index route. But, if there is any sort of persistent navigation in the parent route we’ll most likely want index route to fill the space when the user hasn’t clicked one of the items yet.

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Blogs />} />
        <Route path="about" element={<About />} />
      </Route>
    </Routes>
  );
}

This allows the Blogs to render by default at /.

Note:

• Absolute paths still work in v6 to help upgrade easier.
• We can ignore relative paths altogether and keep using absolute paths forever if we would like to.

Check out more details about all the cool stuff that has been added to React Router on the official blog.