React

React Router 5

version 5

React Router 5 is latest stable major version of React Router library. The latest stable React Router 5 version is v 5.2.0.

Something really good that React Router team has done is to make React Router 5 fully backward compatible with React Router 4. So migrating to React Router 5 should be fairly simple.

Few main things that are coming in React Router 5 are listed below.

  • You will now get much better support for React 16. Remember that React 16 comes up with awesome features like fragments, error boundaries, portals, custom dom attributes, better performing server side render and smaller file size. All the more reasons why you must migrate to latest React version which os React v16.5 as of now.
  • No more redundant warnings in <StrictMode>. StrictMode is a very cool React tool to highlight problems in your application. But it was problematic making it work with React Router 4.
  • A sensitive prop has been added to the NavLink component. NavLink component can be used to specify which Link is active in your application navigation bar.
  • The history object now has its own context.

While you can migrate from React Router 4 to React Router 5 without making any changes, follow the below guidelines to better use the awesome React Router team has built for you in version 5.

Writing import statements before React Router 5

import Router from 'react-router/Router';
import Switch from 'react-router/Switch';

Writing import statements in React Router 5

import { Router, Switch } from 'react-router';

One cool thing that you can do with React Router 5 version is that you can render same component for multiple route paths just in one line.

Rendering same component for multiple routes before v5

<Switch>
  <Route path="/users" component={User} />
  <Route path="/superuser" component={User} />
<Route path="/adminuser" component={User} />
<Route path="/supplieruser" component={User} />
</Switch>

Rendering same component for multiple routes in v5

<Route path={["/users", "/superuser", "/adminuser", "/supplieruser" ]} component={User} />

React Router 5 now provides first class support for React.createRef. Refs give you access to DOM nodes or React elements created in the render method. Refs are to be used when you want to trigger some animations, or integrate a 3rd party library, but don’t overuse them, let your state and hooks do the job for you.

Before we conclude the article let’s review the recommendation of React Router Team on what not to use starting from React Router 5 version.

  • The Route param & Route render will most likely be depreciated in future. So start thinking of migrating those to useParams hooks.
  • Replace withRouter with hooks. The state can be composed easily using hooks. withRouter will also very likely be depreciated in later react-router versions.

Hopefully this info will give you much needed motivation to migrate from your react router earlier versions to React Router 5. Let me know how migration went through using comments.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tagged ,

Leave a Reply

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