Upgrade from React Router v5 to React Router v6
React Router is a standard client routing library in React which enables the navigation among views of various components in a React Application. It can run anywhere React runs like on the web, React Native and also on the server-side.
The react router version 6 has introduced several powerful new features along with improved compatibility with React’s latest versions.
Let me remind you that v6 does make heavy use of React hooks — so, you’ll need to be on React 16.8 or greater before you attempt to upgrade to Router v6. If you are on v4 or v5, then you should be able to upgrade to React without disturbing any of your router code — so make sure that you’ve upgraded to React 16.8 or higher and then deploy your app.
You can check the official React documentation to know more about how to upgrade from v4/v5 to v5.1 as it will be easier to make the switch to React Router v6 if you upgrade to v5.1.
How to install React Router:
To install React Router v6 — just run npm install react-router-dom@6 in your project terminal and then wait for the installation to complete.
If you are using yarn then use this command:
yarn add react-router-dom@6
<Routes> also manages <Switch>
In v5, we could use <Switch> to wrap our routes but in v6 <Switch> is not exported from react-router-dom. Now we’ll have to use <Routes> to do the same thing instead of <Switch>.
<Routes> is kind of <Switch> only, but a lot more powerful as it leads to leaner, more predictable code and also they can be nested in one place instead of being spread out in different components.
Note: <Routes> isn’t a replacement of <Switch>, rather it is a compulsory parent component you have to use for individual <Route> components. But at the same time, <Routes> is an advanced way to compare the URL and <Route>.
V5:
V6:
Use <Route element> instead of <Route children>
The component that should be rendered on matching a route can not be written as children of the “Route component”, but it takes a prop called “element” where we have to pass a JSX component to be rendered. Another important reason for using the “element” prop in v6 is that <Route children> is reserved for nesting routes.
V5:
V6:
No Need To Install “react-router-config” Separately
react-router-config allowed us to define our routes as JavaScript objects, instead of React elements, and all its functionalities have now moved to the core react router v6.
V5:
V6:
Use “useNavigate” instead of “useHistory”
React Router v6 introduces a new navigation API that is synonymous with <Link> and provides better compatibility with suspense-enabled apps.
V5:
In v6, this app should be rewritten to use the navigate API. Most of the time this means changing useHistory to useNavigate:
V6:
Replace “Redirect” with “Navigate”
Redirect is no longer exported from react-router-dom.
We can use Navigate to achieve the same features instead.
V5:
V6:
Do note that the replace prop is passed inside the element of the Route which signifies that we are replacing the current navigation stack.
Without replace, it would mean we are just pushing the component in the existing navigation stack.
You don’t need the “exact” Prop anymore
React router’s better path matching algorithm enables us to match a particular route match without the “exact” prop. Earlier, without “exact”, any URL starting with the concerned keyword would be loaded, as the matching process was done from top to down the route definitions.
You don’t need to worry about that now as React Router has a better algorithm for loading the best route for a particular URL, the order of defining does not really matter now.
So these are just a few features of React Router v6.
Grab your copy of my bestselling ReactJS course on Udemy.
React Router v6 lectures will be live in October 2022.
About me:
Founder and CEO of an IT company in India, I have more than 25 years experience of in dealing with people, processes, and codes. I started online training for my students when it was not in fashion and have trained more than 1000 students/working professionals personally which has helped them to secure awesome jobs or even start their own businesses.
Check out my Udemy profile to know more about the courses that I teach.
I am also been an active corporate trainer for several years now and have been consulting with top Fortune 500/1000 companies to streamline their development projects efficiently. My goal is to share knowledge with a primary focus on advanced tools & techniques, projects, and standard programming practices to help my students understand the basics and fundamentals and make awesome technological implementations.
