In this article, we will walk through what’s new with React Router v.6 and how we could update an existing React app, that’s using React router v.5 or lower version to React Router v.6.
To learn more detail about React Router v.6, you can check out the official website ReactRouter.com and the documentation you can find there. And they provided specifically an upgrading guide, where we can find the detailed upgrading steps and we can learn what’s new and what changed from older versions.
It’s simple to upgrade and not a lot of code change. Overall v.6 is a lot better than the v.5.
Update react-router-dom in package.json
We all are using react-router-dom v.5 or lower versions in our projects, we going to update router version, with the simple npm comment “npm install react-router-dom@6”- which ensures that you are going to install v.6, also we can “npm install react-router-dom@latest” – which will always give you the very latest version.
Once router package was updated to v.6, now we can run “npm start”, we can see that the project won’t work.
If we visit the browser page to figure out what’s the error, we can see “Switch is not exported from recat-router-dom” – this would be the first error we all will get.
Switch is not exported from recat-router-dom
This going to be our first changes, in v.5 or in older versions, we used Switch component, which is provided by the react-router package to wrap all our routes and it’ll make sure that only one routes is loaded at a time.
import {Route, Switch} from ‘react-router-dom’;
<Switch>
<Route path=’/welcome’>
<Welcome/>
</Route>
<Route path=’/products’ exact>
<Products/>
</Route>
<Route path=’/products/:productId’>
<ProductDetail/>
</Route>
</Switch>
Now, with react-router-dom v.6, switch component doesn’t exist anymore. Instead, Switch becomes ‘Routes’. So we need to replace Switch with Routes both in return and also in react-router-dom import.
import {Route, Routes} from ‘react-router-dom’;
<Routes>
<Route path=’/welcome’>
<Welcome/>
</Route>
<Route path=’/products’ exact>
<Products/>
</Route>
<Route path=’/products/:productId’>
<ProductDetail/>
</Route>
</Routes>
Now we did our first change, if you run this simple app, it’ll run, but route components welcome and products won't work.
Route component
The reason for this, the way how we define our routes also changed. We still have route component in react-router-dom v.6 and it still takes a path prop, but in v.6 there is no longer a child component for Route component, but instead on Route we need to add a new element prop.
<Route path=’/welcome’ element={<Welcome/>} />
<Route path=’/products’ exact element={<Products/>} />
In this element prop we can pass a dynamic value to element and that dynamic value is that to be rendered component as JSX. **Yes, we should pass as JSX element.
<Route path=’/welcome’ element={Welcome} /> -- this won’t work, should pass as JSX element
Remove Exact
Also, with v.6, the exact prop is gone, it now always looks for exact matches of the path props. so, there is no need to using exact props in Route component with v.6.
<Route path=’/products’ element={<Products/>} />
If we want that old exact prop behavior of matching the start of path only, we can still get that by adding /* after the path.
<Route path=’/products/*’ element={<Products/>} />
Once we add start at the end, this Route will become active if a URL path starts with /products, instead of being only /products.
Order of Routes doesn’t matter anymore
Let’s consider the following Routes,
<Routes>
<Route path=’/products/*’ element={<Products/>} />
<Route path=’/products/:productId’ element={<ProductDetail/>} />
</Routes>
According to v.5 the above routes, for eg. If the incoming URL is “/product/55”, it’ll render <Products/> component, it’s because the order Route which I wrote.
But in v.6, any URL which starts with /products, it should render <Products/> component, at the same time, if the incoming URL is “/product/55”, it’ll render < ProductDetail /> component, because we explicitly declared this Route in Routes.
The reason for this is that internally, React-router-dom v.6 have a better algorithm for picking the best route to be loaded for the given path. So unlike with v.5, in v.6 the order of Routes is doesn’t matter anymore.
So, these are the couple of initial and important changes we need to consider when migrating from v.5 to v.6.
Still, there are more changes we have to do, let see that in the next article. I hope this article helped you to understand the beginning of react-router-dom v.6.