Migrating to React Router v5

In this article I’ll be talking about integrating react router v5 and it’s features.

We all find very few articles talking about the updates in v5 of react-router. So in this article we are going to see the use of connected-router along with the new updates that are being introduced in the v5.

Note: For users who are planning to migrate their projects from v4 to v5, news for them is there are no breaking changes in v5 and it is fully compatible with React >=15.

So let’s get started with few highlighted features of react-router v5,

• Introduction of hooks in v5
• Adding route path arrays

As we all know React Hooks these days is one of the Hot topics of discussion and interestingly this is now supported with v5.

New hooks that are being introduced are:

• useHistory
• useLocation
• useRouteMatch
• useParams

Now let’s see the practical implementation of these hooks in the code base,

• useHistory

import { useHistory } from ‘react-router-dom’
let history = useHistory();

Now inside the history variable you will get all the history related props and methods that we can use to navigate.

This object will look similar to the traditional history object,

• useLocation

import { useLocation } from ‘react-router-dom’
let location = useLocation();

This useLocation is going to return the location object that is used to navigate inside the application or performing checks on queryParams.

• useRouteMatch

import { useRouteMatch } from ‘react-router-dom’
let match = useRouteMatch();

This is the amazing hook that’s gonna save a lot of time in functional components to render a route by matching the path. Prior to this we need to render the Route in order to match the path, but this hook will access the match api and grant access to all the match parameters such as path, sensitive, strict.

• useParams

import { useParams } from ‘react-router-dom’
let params = useParams();

This hook will return us the key/value pairs of the URL parameters that can be passed or used for any business logic. Prior to this hook we use to access these params via match.params

The good thing regarding this hook is you can use it in any child component to access the routing params.

Now talking about the next update that allows us to pass the route path arrays. This is important where we have the child routes or different routes rendering the same component with different view based on business logic.

Example to provide route path arrays,

In the above example, we can see that we can pass multiple paths for the same component and any path can contain the dynamic route params.

In this article, I would also like to talk a little bit more about navigation using connected-router as a HOC in your react application.

Now there are two things that v5 supports well.

• If we want to navigate within our application and we don’t want to delegate the responsibility to change the URL to sagas/thunks (doesn’t matter what middleware you’re using to make async calls), then if we wrap our root component with <connected-router/>, it will supply the routing props to your component.

Now inside our component we can change the route inside componentDidUpdate() lifecycle by accessing the history prop from the component props that are passed via connected router to its child components.

Note: Always access the pathname/search/hash from the location prop instead of the history prop because in case you modify the route at some other place the history props will get updated. But when you need to modify the route or query params always modify them by accessing the history object.

• Now in case, some people decide to delegate the route change responsibility to middlewares such as sagas or thunks, v5 respects their decision. You can either use push/replace from redux-saga/effects to change the route asynchronously and it will trigger @@router/LOCATION_CHANGE action. You can observe this in action if you are familiar with using Redux dev tools in your application.

Apart from these major updates, v5 is now supporting the “component” API in <Link/> components.

In addition to this, we can now pass the functions to <Link to={someFunc}/> and <NavLink to={someFunc}/>

I hope this article will help the community to update from router v4 to v5 in a much simpler way.

Share your valuable feedbacks.

Happy Coding!!