Post
Ask Question

React Router V6 - What Changed And Upgrading Guide - Part Two

In the previous article, we saw the initial and important changes we need to consider when migrating from react-router-dom v.5 to v.6.

Link Component

We still have the Link component in v.6, which generally works as you learned in v.5, there is no change.

<Link to=’/path’> Linkto </Link>

NavLink Component

Navlink is moreover same as v.5, however, what did change in v.6 is the activeClassName prop. With Router v.5 we could use this prop to apply some CSS class automatically to the link once the link became active.

<NavLink activeClassName={classes.active} to=’/path’> PathName </NavLink> --> v.5

With Router v.6, activeClassName prop is removed.

Instead, if we want to apply specific class once the link became active, we have to find out manually, whether this link is active or not. Doing that is very simple, because still we can use the className prop or the style prop to apply the dynamic CSS style. But both props wok in a special way when applied to NavLink.

className prop in NavLink does not just take the class name, instead, it takes a function which we can pass inside className prop, and this function will give us some information about the link and the current state of navigation.

<NavLink className={(navigationData) => {}} to=’/path’> PathName </NavLink>

That is, we’ll get some navigationData data, you can see that inside the className prop, this navigationData argument is provided by Router v.6 to this function when this function is executed. And this function will be executed by react router when it evaluates NavLink component, also whenever the navigation changes.

Inside of this navigationData, contains the property called ‘isActive’, this isActive property will be true if this link path is active. So we can use this isActive to return a className dynamically.

<NavLink className={(navigationData) => navigationData.isActive ? classes.active : null } to=’/path’> PathName </NavLink>

useParams()

useParams is used to get the dynamic parameter which is the part of the URL that was provided by the react-router-dom package.

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

There is no change in useParams in v.6, this code still works in v.5.

Redirect Component

import {Routes, Route, Redirect} from ‘react-router-dom’ <Routes>
  <Route path=’/path’>
    <Redirect to=‘/redirectPath’ />
  </Route>
</Routes>

In the above sample code, we can see, there is a Redirect component we have used inside of Route component. In v.6 we got some noteworthy changes need to do.

Redirect component doesn’t exist anymore in v.6.

We can still redirect, of course, the only thing that changed is that now instead of redirect, it is Navigate component.

import {Routes, Route, Navigate} from ‘react-router-dom’

Also, we should use this Navigate inside of element prop, instead of passing the navigate component as a child.

<Routes>
  <Route path=’/path’ element={ < Navigate to=‘/redirectPath’ />} />
</Routes>

If we do it like this, what we will actually do is we will push a navigation to this page onto the navigation stack, if we truly want to redirect. So, to replace the current page with the new page, we have to add the replace prop to navigate as well.

<Route path=’/path’ element={< Navigate replace  to = ‘/redirectPath’ />} />

Nested Route

Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

We may face this error when we try to migrate from v.5 to v.6.

App.js

import { Routes, Route } from ‘react-router-dom’;
<Routes>
    <Route path=’/path’ element={<component1 />}>
    <Route path=’/path’ element={<component2 />}>
</Routes>

Component1.js

import { Route } from ‘react-router-dom’
Return (
<>
    <Route path=”/path” > path name </Route>
</>
)

In v.5 we’ll follow the nested route like the above sample code, in v.5 we didn’t have to wrap the Route definition components with Routes or Switch components. But with v.6, this is mandatory to wrap Route with Routes.

import { Routes, Route } from ‘react-router-dom’
Return (
    < Routes >
        <Route path=”/path” element={<someComponent/>} />
    </ Routes >
)

After these changes, we don’t get the above error anymore.

We already covered pretty much all-important changes with v.5 to v.6, lets continue this with the next article. I hope this article is very useful for you.


Similar Articles