React Router v6 in Three Minutes

Learn what’s coming in the latest alpha

Emre Yilmaz
Feb 24 · 3 min read
Photo by Fatos Bytyqi on Unsplash.

At the time of writing, React Router v6 is shown on the horizon as an alpha version. Even if it is an early alpha version, there is so much great news to talk about.

As you may already know, there is another great routing solution for React called Reach Router. Reach Router is lightweight, easier to use, and focuses on accessibility. It’s built by one of the core React Router contributors, Ryan Florence. As Ryan mentioned in his mid-2019 blog post, React Router and Reach Router will be merged together and React Router is going to be the surviving project.

We’ve seen the first efforts in v5.1 with Hooks API, but we’re starting to see the actual results with v6: nested routes, relative links, relative routes, automatic route ranking, and so on.

Note: React Router v6.0.0-alpha.2 was used at the time of writing.


Get React Router v6

Run the following command to get React Router v6:


Bundle Size

One of the great improvements over previous versions is the bundle size. It has been reduced by almost 70% from the previous version.

React Router v6 is ~70% reduced in bundle size.

Michael Jackson, the creator of React Router, explains how they achieved this result:

How React Router v6 was reduced by ~70% in the bundle size.

Switch to Routes

<Switch> is replaced with <Routes>. Thanks to this new API, we can define all our routes in one place and have automatic route ranking as well as relative routes and links.

Routes configuration

Nested and Relative Routes With Automatic Route Matching

<Route> has undergone some changes to make our lives easier.

  • <Route component> was removed in favor of <Route element>.
  • <Route children> was changed to accept child routes.
  • No more <Route exact> and <Route strict> since routes are matched automatically.
  • <Route path> is relative to the route’s hierarchy.
Nested routes example

Relative Links

Just like <Route path>, <Link to> is also relative to the route’s hierarchy. If you omit the beginning /, it becomes relative to the route path that it sits in.

Relative links example.

Descendant Routes

You have the freedom to use multiple <Routes> in one application. It can be useful to compose small applications to work together.

Descendant routes configuration.

useRoutes

Do you remember the react-router-config package that enabled you to define your routes as an object? Well, that package is history. Now we havethe useRoutes hook instead.

It’s similar to the old package with a few improvements. You define your routes as an array of objects, pass it to the custom hook, and you get a React element that you can render. That’s it.

Here is an example configuration:

Routes configuration with useRoutes.

I hope it’s not going to be a surprise for you if I say <Routes> is just a wrapper component over useRoutes.


useNavigate Instead of useHistory

useHistory is now history. It’s been replaced with React’s suspense-ready navigate API. From now on, you can useNavigate to navigate around. It has both imperative and declarative options.

useNavigate usage in imperative and declarative ways.

Conclusion

More and more details will surely come in the following days. No matter what, I’m already happy with what I see.

Happy coding!

Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Emre Yilmaz

Written by

JavaScript personality. I share my knowledge and experience to spread the love 🥰! Follow me on https://twitter.com/emreloper 👋

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade