React Router v6 Basics & Migration guide from v5

React Router is a popular library for handling routing in React applications. It allows you to easily specify the relationship between different parts of your application and provides a way for users to navigate between them.

If you are using an older version of React Router (before version 6), you may be interested in upgrading to the latest version. In this article, we will look at how to use React Router v6 and how to upgrade your app from v5 to v6.

Introduction to React Router v6

React Router v6 is a major overhaul of the previous versions of the library. It introduces a new API that is more flexible and easier to use. Some of the key changes in v6 include:

• A new Routes component that replaces the Route component from v5. The Routes component allows you to define a tree of routes, rather than just a flat list. This makes it easier to structure your routes and apply common patterns, such as layout or authentication.

• A new Link component that replaces the NavLink component from v5. The Link component allows you to create links to different routes in your application. It also supports automatic prefetching of the linked route, which can improve the performance of your app.

• A new useParams hook that allows you to access route parameters in your components. This makes it easier to build dynamic routes, such as a route that displays a user's profile based on their username.

• A new useLocation hook that allows you to access the current location in your components. This can be useful for implementing features such as scroll restoration or tracking analytics.

Setting up React Router v6 in a new app

To use React Router v6 in a new app, you will need to install it from npm:

npm install react-router-dom

Once you have React Router installed, you can start using it in your app.

First, you will need to wrap your app in a Routes component. This component will define the tree of routes in your app. Inside the Routes component, you can use the Route component to define a specific route. The Route component takes two props: path, which specifies the URL pattern for the route, and element, which specifies the content to render when the route is active.

Here is an example of a simple app with two routes:

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

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

To create a link to a specific route, you can use the Link component. The Link component takes a to prop that specifies the destination route. When the link is clicked, React Router will update the URL and render the corresponding route.

Here is an example of a navbar with two links:

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

Upgrading from React Router v5

If you are currently using an older version of React Router (v5 or earlier), you may be interested in upgrading to v6. Here are some of the steps you can follow to upgrade your app:

1. Install the latest version of React Router:

npm install react-router-dom@latest

1. Update your imports to use the new API:

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

1. Replace the Router component with the Routes component:

- <Router>
+ <Routes>

1. Replace the NavLink component with the Link component:

- <NavLink to="/">Home</NavLink>
+ <Link to="/">Home</Link>

1. If you are using route parameters, you will need to update your code to use the useParams hook:

- function User({ match }) {
+ function User() {
-   const { username } = match.params;
+   const { username } = useParams();

1. If you are using the useLocation hook, you will need to update your code to use the useLocation hook:

- import { withRouter } from 'react-router-dom';
- function ScrollToTop({ history, location, children }) {
-   useEffect(() => {
+ import { useLocation } from 'react-router-dom';
+ function ScrollToTop() {
+   const { pathname } = useLocation();

1. If you are using the Switch component, you will need to update your code to use the Route component's matches prop:

- import { Switch, Route } from 'react-router-dom';
- <Switch>
-   <Route exact path="/">
-     <Home />
-   </Route>
-   <Route path="/about">
-     <About />
-   </Route>
- </Switch>
+ <Route path="/" element={<Home />} />
+ <Route path="/about" element={<About />} />

By following these steps, you should be able to upgrade your app from React Router v5 to v6. If you have any issues during the upgrade process, you can refer to the React Router documentation or seek help from the community.

Conclusion

In this article, we have looked at how to use React Router v6 and how to upgrade your app from v5 to v6. React Router v6 offers a new and improved API that is easier to use and more flexible. By upgrading to the latest version, you can take advantage of these improvements and keep your app up to date.