F7Deat.Blogspot.Com: What’s New In React Router 6

React Router is by far the most popular library in the React ecosystem. According to npm, it is downloaded about 3.6 million times a week. This number is almost half of React’s 7.6 million weekly downloads. This means that almost every second project that uses React uses React Router.

Photo by Matt Duncan on Unsplash

That’s huge. Almost half of the React projects out there rely on React Router for routing. Chances are, if you have worked with React, you have worked with React Router.

Now with version six in beta and a new release coming soon, we thought it would be interesting to take a dive into what’s new and what has changed in React Router version 6.

React Router is not without controversy

For a library that is so important to the React community, it has gone through a number of iterations and breaking changes. From its first release in 2014, and with every major release, the maintainers of React Router have introduced new features and breaking changes. Some in the React community have complained about the difficulty of upgrading from one version to the next, and have questioned the library’s constant churn.

Many have complained about the difficult upgrades that came with every new major release of the library.

Not everyone needs to upgrade

If your application is working correctly, and you don’t need access to the new features promised in version 6, you can stick with your older version. Don’t feel the need to refactor your old applications to use React Router 6. If it ain’t broke, don’t fix it.

What’s new

So without further ado, let’s take a look at what’s new and what has changed in the latest version of React Router

• Routes Replaces Switch

Routes is introduced as a new element in React Router version 6. This new element allows us to easily define nested routes and relative routes, and make it easy to compose complex routes and layouts. In the previous version of the library, we defined Routes inside of a Switch.

• Routes and Links are relative to their parent

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

function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="customers/*" element={<Customers />} />
</Routes>
</BrowserRouter>
);
}

function Customers() {
return (
<div>
<nav>
<Link to="/1">Customer 1</Link>
</nav>

<Routes>
<Route path="/" element={<CustomersList />} />
<Route path=":id" element={<Customer />} />
</Routes>
</div>
);
}

Now, all Route and Link children of a Route are relative to their parent. This makes it a lot easier to build applications with many nested routes and makes it easier to reason about your application’s routing logic.

If you have used previous versions of React Router, you will immediately notice that we don’t need to use the exact prop anymore. You will also notice that the Link we defined is relative. Instead of passing /customers/:id, we can just use /:id.

• Object-based routes

Now we can define our routes using the new useRouter hook. This allows you to build your routes using JavaScript objects. Let’s take a look at our previous application, now defined using useRouter.

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

function App() {
let element = useRoutes([
{ path: '/', element: <Home /> },
{
path: 'customers',
element: <Customers />,
children: [
{ path: '/', element: <CustomersIndex /> },
{ path: ':id', element: <CustomerProfile /> },
]
}
]);

return element;
}

function Users() {
return (
<div>
<nav>
<Link to="/1">Customer 1</Link>
</nav>

<Outlet />
</div>
);
}

You might ask yourself, why does it matter? Why would I want to compose my routes using JavaScript objects instead of JSX? One great use case would be to programmatically build routes, let’s say, based on the directory structure of your application. You could loop through all of the files in your pages directory, and build routes from that.

• Smaller Bundle Size

The team behind React Router claims that the new version is a lot smaller than the previous versions. They estimate that it’s about 70% smaller. Smaller bundles mean that your application loads faster, and content to your users faster.

• Suspense Ready Navigation

The old useHistory hook has been removed and replaced with a suspense-ready navigate API. Now you can use useNavigate to programmatically navigate around your application. They also expose a Navigate component that you can use to redirect your users.

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>
);
}

So that’s it! If you believe that your applications can benefit from smaller bundle sizes, and from suspense ready navigation, we strongly suggest that you upgrade to the latest version. Try out the beta, and see if you like it.

What’s New In React Router 6