What’s new in React Router version 6

React router is a very huge library to implement routing in React. Today we’ll talk about the new features of the React Router version 6. Right now, it’s in beta. We’ll also compare all the features with the older version of the React Router v6.

Install React Router v6

What’s new in React Router v6

  1. Reduced the bundle size
  2. Introduced <Routes> instead of <Switch>
  3. Changed the props of the <Route />
  4. Removed exact and strict props
  5. Omit the “/” for the relative paths and links
  6. Changed the structure of the Nested Routes
  7. Use useNavigate Instead of useHistory

1. Reduced the bundle size

The bundle size of the react router v5 was 28.9 kB whereas the new version 6 is only 12.2 kB. So we can say bundle size decreased by more than 50%.

Bundle Size - React Router v6 - Clue Mediator
Bundle Size – React Router v6 – Clue Mediator

The above comparison has been done by using BundlePhobia tool.

2. Introduced <Routes> instead of <Switch>

With the new version, You will not be able to use <Switch> but instead of that we have <Routes> in v6.

v5

v6

3. Changed the props of the <Route />

The structure has been changed in version 6. Instead of component now we have to use the element to load the component and it’s very easy to pass the external props directly to the component.

v5

v6

4. Removed exact and strict props

All the routes basically match exactly in the v6 so exact and strict props are removed from the new version.

v5

v6

5. Omit the “/” for the relative paths and links

In the v6, we can omit the / char from the paths and links, if both are relative to their parent route.

Example of the <Link />

v5

v6

Example of the <Route />

v5

v6

6. Changed the structure of the Nested Routes

The nested routes are easier with v6 where we have to wrap the child routes with a parent route. The <Outlet /> component is introduced to manage the children routes in the react router version 6.

v5

v6

7. Use useNavigate Instead of useHistory

Now the useHistory hook is replaced with the useNavigate hook in the new version of the react router.

v5

v6

If you want to use the history.replace in the v6 then the following command will be used.

v5

v6

That’s it for today. Hope you like it.
Thank you for reading. Happy Coding..!!

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *