What's new changes and features in React Router v6.

In the React ecosystem, React Router is the most used and popular library. It's downloaded about 3.6 million times a week, according to npm. This amount is almost half of React's 7.6 mmillion weekly downloads. That means React Router used almost half of the React project. The latest version of React Router 6 has created a lots of buzz in the React community. So, Without further ado, Let's explore some new changes and features of React Router.

Routes Replaces Switch:

In latest version is replaced with . Routes component has a new prop called element, where you can pass the component it needs to render.

Example:  
<Routes>
  <Route path="user/:id" element={<User />} />
  <Route path="users/new" element={<NewUsers />} />
</Routes>

In this change, we don't need to concern about the order anymore because Routes picks the most specific routes fisrt based on the current URL.

Use "useNavigate" instead of "useHistory":

The old useHistory hook has been removed and replaced with a suspense-ready navigate API. Now you should use "useNavigate" to programmatically navigate around your application. To redirect your user, they expose a navigate comonent.

Exaple: 

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

function Redirect() {
  return <Navigate to="/home" replace />;
}

function GoHomeButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home')
  }
  return (
    <div>
      <button onClick={handleClick}>Go to home page</button>
    </div>
  );
}

Replace "useRouteMatch" with "useMatch":

useMatch is to mush similar to v5's useRouteMatch, with a few key differences:

It uses new path pattern matching algorithm

The pattern argument is now required

No longer accepts an array of patterns

When passing a pattern as an object, some of the options have been renamed to better align with other APIs in v6

useRouteNatch({strict}) is now useMatch({end})

useRouteMatch({sensitive}) is now useMatch({caseSensitive})

It returns a match object with a different shape

Nested Route:

Nested Route is the most important and useful feature in react router. We use it so many time specially in larg and complex application. In latetst version of react router dom, we notice some changes on it. Look at this code

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users" element={<Users />}>
          <Route path="/" element={<UsersIndex />} />
          <Route path=":id" element={<UserProfile />} />
          <Route path="me" element={<OwnUserProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Outlet />
    </div>
  );
}

If you compare this code with previous nested route system code, you will notice few things:

In latest version we are using to coecify nested routes! The URL paths nest along with the route elements, so /users/me renders .

We used an element as a placeholder. Here define how the User component renders its child routes. Depending on the current location, will render either a or element.

Smaller Bundle Size:

The React Router authority claims that the new version is a lot smaller than the previous versions. Authority estimate that it's about 70% smaller. Your application loads faster, especially over slow/poor network connections and content to your user faster for smaller bundles.

Hopefully this post has given you some clear-sightedness into the latest version of React Router v6. I hope it has also given you some ideas about how you can get started with it and use it in your application. If there is any mistake. Please let me know.