React Router V6: What’s New to Offer

React Router is a popular library for routing in React applications. The latest major version as of my knowledge is version 6, which includes several important differences from version 5. Here are some of the key differences and examples:

Route matching syntax

In version 5, we use the path prop to specify the route path and the component prop to specify the component we need to render for that route. For example, in version 5, we would define a route like this:

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

<Route path="/about" component={About} />

In version 6, we use the “element” prop instead of the “component” prop to define the component to render for that route.

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

<Route path="/about" element={<About />} />

Nested routes

In version 5, we would typically define nested routes using the “render” prop, which would render the child component when the parent component was rendered. For example, in version 5, we might define nested routes like this:

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

<Route path="/about" render={() => (

<About>

<Route path="/about/team" component={Team} />

<Route path="/about/history" component={History} />

</About>

)} />

In version 6, we use a new approach to define nested routes more declaratively.

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

<Routes>

<Route path="/about">

<Route index element={<About />} />

<Route path="team" element={<Team />} />

<Route path="history" element={<History />} />

</Route>

</Routes>

Here’s a breakdown of what each part of the above code does:

The <Routes> component sets up a routing container that will match and render the child <Route> components based on the current URL path.

The outermost <Route> component has a path of "/about", which means that any URLs that match "/about" or "/about/*" will be handled by this route and its children.

The first nested <Route> component has an index prop, which means it will be rendered when the parent route's path exactly matches the current URL <Routes>. So when a user navigates to the “/about” URL path, the <About> component will be rendered by default because it has the index prop.

The second nested <Route> component has a path of "team", which means that it will be matched and rendered when the parent route's path is followed by "/team". Therefore when the user navigates to “/about/team”, the <Team> component will be rendered. Similarly, if the user navigates to "/about/history", the <History> component will be rendered.

Dynamic routing

In version 5, we define dynamic routes using a colon notation to match a dynamic value in the URL and then access this dynamic value using the match prop passed to the component. For example, in version 5, we define a dynamic route like this:

<Route path="/users/:userId" component={User} />

And in the <User> component, we may access the dynamic “userId” value like this:

const User = ({ match }) => {

const userId = match.params.userId;

// Render component using the userId value...

};

In version 6, we can still use the colon notation to define dynamic routes, but we can now use a new useParams hook to access the dynamic values.

const User = () => {

const { userId } = useParams();

// Render component using the userId value...

};

Navigation

React router version 6 also provides useNavigate hook which allows us to navigate to a different URL in our application. For example, in version 5, we might navigate to a new page like this:

const MyComponent = ({ history }) => {

const handleClick = () => {

history.push('/about');

};

};

In version 6, we can navigate to a new page like this:

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

const MyComponent = () => {

const navigate = useNavigate();

const handleClick = () => {

navigate('/about');

};

};

Conclusion

These are just a few of the key differences between React Router version 5 and 6. There are many other changes and new features in version 6, so it’s worth reading the documentation carefully if you’re upgrading from version 5.