history.push()<\/code> does not trigger navigation; it was observed that history.push()<\/code> updated the browser\u2019s url but does not navigate to the path. Learn more about the issue here<\/a>.<\/p>\n\n\n\nNext, push<\/code> and replace<\/code> retain previous search<\/code> and hash<\/code> strings. When the push<\/code> or replace<\/code> method is executed on history<\/code>, the search<\/code> and hash<\/code> strings from the previous routes remain in the new route. Learn more about the issue here<\/a>.<\/p>\n\n\n\nAnother issue is that Routes<\/code> queries route paths with the most similar naming instead of with exact naming. For instance, a route name \/test<\/code> would still be called if the browser route is \/<\/code>, \/t<\/code>, \/te<\/code>, \/tes<\/code>, or \/test<\/code>, which is incorrect. Developers have to specify the prop exact<\/code> to strictly query route names.<\/p>\n\n\n\nFinally, defining routes with the same path but optional parameters needs special arrangements. For instance, when defining the route \/games<\/code> and another route with the same name, the parameter \/games\/:id<\/code> is required. Developers need to arrange the definition so the route with the parameter comes first, otherwise the routes don\u2019t work as expected.<\/p>\n\n\n\n\/\/ The correct way: Here '\/games' will render 'Games' component but not 'SelectedGame', because it does not have a parameter 'id'. While '\/games\/:id' will render only the 'selectedGame' component\n<Router>\n <Route path=\"\/games\/:id\" component={SelectedGame} \/>\n <Route path=\"\/games\" component={Games} \/>\n<\/Router>\n\n\/\/ The wrong way: Here either '\/games' or '\/games\/:id' will render the 'Games' components\n<Router>\n <Route path=\"\/games\" component={Games} \/>\n <Route path=\"\/games\/:id\" component={SelectedGame} \/>\n<\/Router><\/pre>\n\n\n\nThe code snippet above illustrates the right and wrong way to order routes that are related by paths or parameters. The first example is the most suitable order, while the second example allows only the route \/games<\/code> to render for any situation where \/games<\/code> has a parameter.<\/p>\n\n\n\nHaving considered the issues with React Router v5, we will now discuss how to migrate and what has changed that makes React Router v6 different.<\/a><\/p>\n\n\n\nMigrating to React Router v6<\/h2>\n\n\n\n
The following sections will teach you how to upgrade to React Router v6 in projects where React Router is already installed, and from scratch.<\/p>\n\n\n\n
Upgrading React Router in a project where it is already installed<\/h3>\n\n\n\n
To upgrade the React Router version, open a terminal and navigate to the project directory where you wish to upgrade it.<\/p>\n\n\n\n
To see a list of the project\u2019s dependencies, use the following command:<\/p>\n\n\n\n
npm ls<\/pre>\n\n\n\nYou should see a list like this:<\/p>\n\n\n\n
![\"List](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/12\/react-router-version-indicator.png\")
<\/figure><\/div>\n\n\n\nAlthough the list generated may not be exactly the one above, if you have React Router installed, you should see the most recent version.<\/p>\n\n\n\n
Next, run the following command to initiate an upgrade:<\/p>\n\n\n\n
npm install react-router-dom@latest\n<\/pre>\n\n\n\nIf you execute this command without being connected to the internet, it will fail because some files must be downloaded during the installation. If everything is in order, you should see something similar; in our case, the most recent version is v6.0.2:<\/p>\n\n\n\n
![\"Update](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/12\/npm-confirmation-upgrade.png\")
<\/figure><\/div>\n\n\n\nIf everything goes well, we should notice that React Router has been updated when we run the npm ls<\/code> command again.<\/p>\n\n\n\n![\"List](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/12\/updated-react-router-list.png\")
<\/figure><\/div>\n\n\n\nInstalling React Router from scratch<\/h3>\n\n\n\n
First, open a terminal in a project directory where React Router isn\u2019t installed. To install a specific version of React Router, run:<\/p>\n\n\n\n
npm install react-router-dom@[VERSION_TO_BE_INSTALLED]<\/pre>\n\n\n\nReplace [VERSION_TO_BE_INSTALLED]<\/code> with the version you want to install.<\/p>\n\n\n\nNext, run the following code to install the newest version:<\/p>\n\n\n\n
npm install react-router-dom<\/pre>\n\n\n\nThis installation also demands the use of the internet. If the installation went well, you should see something similar to this:<\/p>\n\n\n\n
![\"npm](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/12\/npm-confirmation-react-router-install.png\")
<\/figure><\/div>\n\n\n\nWhat changed?<\/h2>\n\n\n\n
It\u2019s important to understand what changed so that we can see why upgrading to React Router v6 is helpful. Note that in certain circumstances, developers will downgrade a program to increase functionality or avoid issues.<\/p>\n\n\n\n
We will go through the changes in React Router v5 that one should think about when choosing which version to implement in a project.<\/p>\n\n\n\n
Setting up routes<\/h3>\n\n\n\n
We had around three different techniques for generating routes in React Router v5, which caused confusion. They are as follows:<\/p>\n\n\n\n
The first technique is to pass the component and path as prop of the Route<\/code> component:<\/p>\n\n\n\n<Route path=\"\/games\" component={Games} \/><\/pre>\n\n\n\nThis works well, however we are unable to pass props to the rendered component.<\/p>\n\n\n\n
The second is to pass in the component as a child of the Route<\/code> component:<\/p>\n\n\n\n<Route path=\"\/games\">\n<Games count=\u201d10\u201d category=\u201dAction\u201d \/>\n<\/Route><\/pre>\n\n\n\nWe may pass custom props to the component we want to render using this approach.<\/p>\n\n\n\n
The third and final technique is to use the render<\/code> prop where a function returns the component to be rendered:<\/p>\n\n\n\n<Route path=\"\/games\" render={(props) => <Games {\u2026props} \/>} \/><\/pre>\n\n\n\nThis also works and lets us to give props to the component we\u2019re rendering. However, it is ambiguous and prone to inaccuracy.<\/p>\n\n\n\n
In React Router v6, routes have been simplified to the point that we no longer need to utilize Switch<\/code> to query them. Instead, we utilize a \u201crequired\u201d component called Routes<\/code>, which only searches for routes by name. The *<\/code> character can be used to query using a wildcard.<\/p>\n\n\n\nWe then supply the component to be rendered to the Route<\/code> component as element<\/code> props. We can also supply custom props to the components in each route that we wish to render.<\/p>\n\n\n\nThe code snippets below demonstrate how to define routes in v6:<\/p>\n\n\n\n
<Routes>\n <Route path=\"\/games\" element={<Games \/>} \/>\n <Route path=\"\/movies\" element={<Movies genre=\"Action\" age=\"13\" \/>} \/>\n<\/Routes> <\/pre>\n\n\n\nYou can also use useRoutes<\/code> to query the routes in the app. To do this, we must alter the index.js<\/code> content, where we change the App<\/code> wrapper from React.StrictMode<\/code> to BrowserRouter<\/code> as below:<\/p>\n\n\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from '.\/App';\nimport { BrowserRouter } from 'react-router-dom'\nReactDOM.render(\n <BrowserRouter>\n <App \/>\n <\/BrowserRouter>,\n document.getElementById('root')\n);<\/pre>\n\n\n\nThen, in the App.js<\/code> file, we define the routes by performing the following:<\/p>\n\n\n\nimport { Outlet, useRoutes } from 'react-router-dom';\nconst App = () => {\n let routes = useRoutes([\n { \n path: '\/', \n element: <div>Hello Index<\/div> \n },\n { \n path: 'games', \n element: <Games \/>,\n children: [\n { \n path: '', \n element: <div>Games Index<\/div>\n },\n { \n path: ':id', \n element: <div>Game Details<\/div>\n }\n ]\n }\n]);\n return routes;\n}\nexport default App\nconst Games = () => {\n return (\n <div className=\"Games\">\n <div>This is the Games pages<\/div>\n <Outlet \/>\n <\/div>\n );\n}<\/pre>\n\n\n\nHere, we imported Outlet<\/code> and useRoutes<\/code>. useRoutes<\/code> allows us to define the routes as an array of objects in which we can specify a path<\/code>, the element<\/code> to be rendered when the path is browsed, and sub-paths. Outlet<\/code> helps us render the child route that matches the current path.<\/p>\n\n\n\nRedirect to another route<\/h3>\n\n\n\n
In React Router v5, we use useHistory()<\/code> to redirect, and as previously mentioned, there have been concerns with this technique.<\/p>\n\n\n\nTo implement it, we normally do the following:<\/p>\n\n\n\n
import { useHistory } from \"react-route-dom\";\n\nconst App = () => {\n const history = useHistory();\n const handleClick = () => {\n history.push(\"\/home\")\n }\n return (\n <div>\n <button onClick={handleClick}>Go Home<\/button>\n <\/div>\n ) \n}\nexport default App<\/pre>\n\n\n\nIn v6, we use useNavigate<\/code> like so:<\/p>\n\n\n\nimport { useNavigate } from \"react-router-dom\";\n\nconst App = () => {\n const navigate = useNavigate();\n const handleClick = () => {\n navigate(\"\/home\");\n }\n return (\n <div>\n <button onClick={handleClick}>Go Home<\/button>\n <\/div>\n );\n}\nexport default App<\/pre>\n\n\n\nLearn more about redirecting with useNavigate<\/code> instead of useHistory<\/code>.<\/a><\/p>\n\n\n\nSpecifying exact route paths in NavLink<\/code><\/h3>\n\n\n\nIn v5, when enforcing an exact path or route, we use the exact<\/code> prop. To implement this we do the following:<\/p>\n\n\n\n<NavLink to=\"\/index\" exact>Go Home<\/NavLink><\/pre>\n\n\n\nIn v6, we use the end<\/code> prop to ensure exact routes:<\/p>\n\n\n\n<NavLink to=\"\/index\" end>Go Home<\/NavLink><\/pre>\n\n\n\nStyling an active NavLink<\/code><\/h3>\n\n\n\nIn React Router v5, we use the activeClassName<\/code> or activeStyle<\/code> props to style a NavLink<\/code> that is currently active.<\/p>\n\n\n\nFor instance:<\/p>\n\n\n\n
<NavLink to=\"\/home\" style={{color: 'black'}} activeStyle={{color: 'blue'}} className=\"nav_link\" activeClassName=\"active\" >Go Home<\/NavLink> <\/pre>\n\n\n\nIn v6, we can now use a function with the argument isActive<\/code> to condition the style<\/code> or className<\/code> to be used for an active NavLink<\/code>.<\/p>\n\n\n\nFor instance:<\/p>\n\n\n\n
<NavLink to=\"\/home\" style={({isActive}) => ({color: isActive ? 'blue' : 'black'})} className={({isActive}) => `nav_link${isActive ? \" active\" : \"\"}`} >Go Home<\/NavLink><\/pre>\n\n\n\nUse useMatch<\/code> instead of useRouteMatch<\/code><\/h3>\n\n\n\nIn v5, useRouteMatch<\/code> was used to create relative subroute paths that matched a particular route.<\/p>\n\n\n\nIn v6, we use useMatch<\/code> for this. Using the useMatch<\/code> hook requires a pattern argument and does not accept patterns as an array.<\/p>\n\n\n\nWhat was removed?<\/h2>\n\n\n\n
In React Router v6, some features are no longer supported, either because they are ambiguous or faulty. So far two features were found to have been removed:<\/p>\n\n\n\n
First, usePrompt<\/code> was used to confirm whether a user want to exit a page, when the page is in a state that does not require the user to leave.<\/p>\n\n\n\nSecond, useBlocker<\/code> is similar to usePrompt<\/code>, and was used to prevent users from leaving a particular page.<\/p>\n\n\n\nThese two feature are similar and gave the same issue. In a situation where a user tries to navigate outside a page and navigation is restricted by either usePrompt<\/code> or useBlocker<\/code>, the URL path changes even though the navigation is prevented.<\/p>\n\n\n\nAlthough there were issues raised about useBlocker<\/code> and usePrompt<\/code>, the creators are still considering adding them back to v6 after they release a stable version. Check here for more details<\/a>.<\/p>\n\n\n\nBenefits of React Router v6 over v5<\/h2>\n\n\n\n
It\u2019s pointless to migrate if one version doesn\u2019t offer any advantages over the other. In this section, we\u2019ll talk about the benefits of upgrading from React Router v5 to v6.<\/p>\n\n\n\n
One of the most important considerations for developers is the application\u2019s portability. The size of React Router v6 has been reduced significantly compared to previous versions. The difference between v5 and v6 is around 60 percent.<\/p>\n\n\n\n
Here is a comparison from Bundlephobia<\/a>:<\/p>\n\n\n\n![\"\"](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/12\/bundlephobia-react-router-v5.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/12\/bundlephobia-react-router-v6.png\")
<\/figure><\/div>\n\n\n\nCompiling and deploying apps will be easier and faster as a result of the size reduction.<\/p>\n\n\n\n
In addition, the bulk of the modifications in React Router v6 that we covered are more beneficial and have fewer issues.<\/p>\n\n\n\n
As previously mentioned, React Router v6 allows routes to accept components as elements when constructing routes, and pass custom props to components. We may also nest routes and use relative links as well. This helps us prevent or reduce the definition of new routes inside various component files, and it also makes it easy to pass global data to components and props.<\/p>\n\n\n\n
When redirecting instead of using useHistory<\/code> (which had issues with updating the URL), the new approach using useNavigate<\/code> has been design to fix the issue of redundant URL. It allows us to set the new route manually (navigate(\"\/home\")<\/code>) instead of updating stale routes (history.push(\"\/home\")<\/code>), which might be a bit ambiguous.<\/p>\n\n\n\nFinally, navigation link NavLink<\/code> allows us to condition active links, which makes our code neater and simpler. Instead of passing two separate props for an active and inactive state. By doing this, we can easily use a ternary operator to condition which style will be affected when a link is active or not.<\/p>\n\n\n\nConclusion<\/h2>\n\n\n\n
After reading this article, I hope you are able to upgrade your React Router version and restructure your codebases to work seamlessly with React Router v6.<\/p>\n\n\n\n
Not only should React Router v5 be upgraded to v6, but Reach Router should be switched to v6 as well.<\/p>\n\n\n\n
Regularly upgrade React Router v6 and review the documentation<\/a> for any changes to stay up-to-date with new releases.<\/p>\n\n\n\nFull visibility into production React apps<\/h2>\n\n\n\n
Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you\u2019re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket<\/a>. <\/a><\/a><\/p>\n\n\n\n