What's new in React Router v6

React router is a very huge library to implement routing in React. Today we'll talk about the new features of the React Router v6. Right now, it's in beta. We'll also compare all the features with the older version of the React Router version 6.

The complete guide of Routing in ReactJS

• Routing in React JS
• URL Parameters with React Router
• Nested Routes in React JS
• Multiple parameters with React Router
• What’s new in React Router version 6 (You are here...)

Install React Router v6

npm install react-router@next react-router-dom@next

What's new in React Router v6

1. Reduced the bundle size
2. Introduced <Routes> instead of <Switch>
3. Changed the props of the <Route />
4. Removed exact and strict props
5. Omit the “/” for the relative paths and links
6. Changed the structure of the Nested Routes
7. Use useNavigate Instead of useHistory

1. Reduced the bundle size

The bundle size of the react router v5 was 28.9 kB whereas the new version 6 is only 12.2 kB. So we can say bundle size decreased by more than 50%.

Bundle Size - React Router v6 - Clue Mediator

The above comparison has been done by using BundlePhobia tool.

2. Introduced <Routes> instead of <Switch>

With the new version, You will not be able to use `<Switch>` but instead of that we have `<Routes>` in v6.

v5

import { BrowserRouter, Switch } from 'react-router-dom';

const App = () => {
  return (
    <browserrouter>
      <switch>
        ...
        ...
      </switch>
    </browserrouter>
  );
}

v6

import { BrowserRouter, Routes } from 'react-router-dom';

const App = () => {
  return (
    <browserrouter>
      <routes>
        ...
        ...
      </routes>
    </browserrouter>
  );
}

3. Changed the props of the <Route />

The structure has been changed in version 6. Instead of `component` now we have to use the `element` to load the component and it's very easy to pass the external props directly to the component.

v5

import { BrowserRouter, Switch, Route } from 'react-router-dom';

const App = () => {
  return (
    <browserrouter>
      <switch>
        <route exact="" path="/" component={Dashboard}>
        <route path="/profile" render="{props" ==""> (
            <profile props={props} role="ADMIN">
          )} />
      </profile></route></route></switch>
    </browserrouter>
  );
}

v6

import { BrowserRouter, Routes, Route } from 'react-router-dom';

const App = () => {
  return (
    <browserrouter>
      <routes>
        <route path="/" element="{<Dashboard">} />
        <route path="/profile" element="{<Profile" role="ADMIN">} />
      </route></route></routes>
    </browserrouter>
  );
}

4. Removed exact and strict props

All the routes basically match exactly in the v6 so `exact` and `strict` props are removed from the new version.

v5

<route exact="" path="/" component={Dashboard}>
</route>

v6

<route path="/" element="{<Dashboard">} />
</route>

5. Omit the “/” for the relative paths and links

In the v6, we can omit the `/` char from the paths and links, if both are relative to their parent route.

Example of the <Link />

v5

<link to="/profile">Profile

v6

<link to="profile">Profile

Example of the <Route />

v5

<route exact="" path="/" component={Dashboard}>
<route path="/profile" render="{props" ==""> (
    <profile props={props} role="ADMIN">
  )} />
</profile></route></route>

v6

<route path="/" element="{<Dashboard">} />
<route path="profile" element="{<Profile" role="ADMIN">} />
</route></route>

6. Changed the structure of the Nested Routes

The nested routes are easier with v6 where we have to wrap the child routes with a parent route. The `<Outlet />` component is introduced to manage the children routes in the react router version 6.

v5

import { BrowserRouter, Switch, Route, useRouteMatch } from 'react-router-dom';

const App = () => {
  return (
    <browserrouter>
      <switch>
        <route exact="" path="/" component={Dashboard}>
        <route path="/profile" render="{props" ==""> (
            <profile props={props} role="ADMIN">
          )} />
      </profile></route></route></switch>
    </browserrouter>
  );
}

const Profile = () => {
  const { path } = useRouteMatch();

  return (
    <div>
      ...
      ...

      <switch>
        <route path={`${path}/:id`} component={MemberInfo}>
        <route path={`${path}/member`} component={MemberProfile}>
      </route></route></switch>
    </div>
  );
}

v6

import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';

const App = () => {
  return (
    <browserrouter>
      <routes>
        <route path="/" element="{<Dashboard">} />
        <route path="profile" element="{<Profile" role="ADMIN">}>
          <route path=":id" element="{<MemberInfo">} />
          <route path="member" element="{<MemberProfile">} />
        </route>
      </route></route></route></routes>
    </browserrouter>
  );
}

const Profile = () => {
  return (
    <div>
      ...
      ...

      <outlet>
    </outlet></div>
  );
}

7. Use useNavigate Instead of useHistory

Now the `useHistory` hook is replaced with the `useNavigate` hook in the new version of the react router.

v5

import { useHistory } from 'react-router-dom';

const App = () => {
  const history = useHistory();

  const handleSubmit = () => {
    history.push('/profile');
  }

  return <button onclick={handleSubmit}>Submit</button>
}

v6

import { useNavigate } from 'react-router-dom';

const App = () => {
  const navigate = useNavigate();

  const handleSubmit = () => {
    navigate('/profile');
  }

  return <button onclick={handleSubmit}>Submit</button>
}

If you want to use the `history.replace` in the v6 then the following command will be used.

v5

history.push('/profile');
history.replace('/profile');

v6

navigate('/profile');
navigate('/profile', { replace: true });

That’s it for today. Hope you like it.
Thank you for reading. Happy Coding..!!