What’s new in React Router v6?

What’s new in React Router v6?

Do you know that the most well-known library for your React application route has another version now?

React Router is the most well-known library for your React application navigation. This new router version 6 carries exceptionally fascinating curiosities.

React Router v6 brings the component Routes, which replaces the old Switch component. The idea is to make it simpler for an application to get viewed as various free/independent parts, every one of them living in a way.

Let's talk about the features of the new react-router v6.

  • It brings the new ‘’ component utilized for the situation wherein we need to take the navigation declaration to an isolated spot. Yet, we must characterize a ‘design layout’ for each group of routes.

  • Another huge change is that regardless of whether you had the option in a past version of React Router to characterize routes as items. This approach to announcing routes is, as of now, 100 % coordinated & integrated into React Router v6 through the useRoutes hook.

  • This new variant of React Router is coordinated & integrated with the React Suspense API. Hence, the useNavigate hook replaces the useHistory hook when we need to navigate the application.

  • This new version of React Router brings very charming news. The unique renditions of this library, as a rule, break old features. That's why we structure and characterize the route of our application will change.

  • As per our expert view, this version's main change is seeing route sets as smaller than standard applications.

How to install React Router v6?

To install React Router v6 in your project, run the below command.

install.png

Let's discuss the above points in detail.

1. Reduced the bundle size

To know the exact bundle size, let's compare with the help of the tool BundlePhobia. It will give us precise bundle size info of v5 and v6.

router 5.png

React Router v5

router 6.png

React Router v6

From the above data, we can conclude that the bundle size of v6 is less. The react-router v5 was 20.9 kB, whereas the new version 6 is just 8.1 kB. So we can say bundle size decreased by almost 60%.

2. Introduced instead of

In the v5 version, we use the , but in the v6 version, we use .

Check below :

switch in react 5.png

React Router v5

switch in react 6.png

React Router v6

With the new version v6, You will not be able to use , but rather than that, we have to use in v6.

3. Use element instead of component

The structure has been changed in version 6. Instead of ‘component,’ we use the ‘element.’

components in react 5.png

React Router v5

element in reaCt 6.png

React Router v6

We must use the ‘element’ instead of the ‘component’ to load the component. Also, it’s effortless to pass the external props to the component.

In React Router v6, we can omit the ‘/’ from the paths and links.

**For Path: **

profile in react 5.png

React Router v5

profile in react 6.png

React Router v6

**For Link: **

profile link in react 5.png

React Router v5

profiel link in react 6.png

React Router v6

Note: We can remove ‘/’ if both are relative to their parent route.

5. Omit exact and strict props

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

exact in react 5.png

React Router v5

not exact in react 6.png

React Router v6

6. Changed the structure of the Nested Routes

The nested routes are more accessible with v6, where we have to wrap the child routes with a parent route.

react vs structure.png

v5 structure

react 6 structure.png

v6 structure

The component is introduced to manage the children's routes in the react-router version 6.

7. Use useNavigate Instead of useHistory

The useHistory hook is replaced with the useNavigate hook in the new version v6 of the react-router.

navigate in react 5.png

React Router v5

navigate in react 6.png

React Router v6

You can also use the history to replace the v6 navigation with the following command:

react 6 profile navigate.png

8. Multiple Routes

Earlier, we could utilize only one-time Routes in our React application. But, now we can involve many Routes in our React App, which will assist us with dealing with various app logic on routes.

Note: Make sure to mark the non-primary router(s) as primary={false} so that it doesn’t manage the focus on those components.

That’s all updates from the latest version of React Router v6.

As you already know, there are the two most used Router packages for React.

  • Reach Router

  • React Router

React Router and Reach Router will be combined, and React Router will be the new single source of truth.

Read more: A comprehensive guide to Using React Router v6 in React Apps.

React Router v6 is in the alpha stage, but many new features are coming soon for React Router.

React Router v6 will show the most standard features like nested routes, relative links, and many more. I hope the above information will help you know the changes occurring in React Router v6.

Please drop your feedback in the comments section below. Thanks!!!

Did you find this article valuable?

Support Quokka Labs' Blogs by becoming a sponsor. Any amount is appreciated!