React Router v6 has been released for production. At the time I am writing this post, the stable version is 6.2.2. Therefore, I will be using this version in this post. This is a period of transition from react-router V5 to V6. The purpose of this article is to help developers to show what changes they need to make in setting up a basic React Router with version 6.
First of all, you need to have React 16.8 and above to implement React Router v6 because version 6 makes use of a lot of React hooks.
In this post, I am going to show you how to implement a basic React Router with version 6. If you are familiar with React Router V5, it is much easier to understand concepts in version 6. Version 6 has some major changes compared with version 5.
If you are not familiar with v5 take a look at this post first.
Table of Contents
What are the major changes between V5 and V6?
<Switch> component is replaced with <Routes> component
This means if you have an application with React Router v5, and if you want to upgrade to v6, you need to replace all the <Switch> components with the new <Routes> component of React Router v6.
Relative <Route path> and <Link to>
Although this is an important difference in V6, you do not need to understand this to implement a basic React Router. However, when you implement nested routes, having an understanding of this concept is critical. I highly recommend you to read this post to learn to implement nested routes. After that take a look at this section of the official documentation of React Router v6.
No Need for ‘exact’ keyword
In the previous React Router versions, you need the exact keyword to match the exact path no matter where you place your home Route (“/”) within the Switch component. With version 6, you do not need the exact keyword. Paths will be matched no matter how they are arranged within the <Routes> component.
If you need to match descendant routes placed in another component you need to use trailing * in the path.
‘element’ prop to match components
In version 6, you will call the matching components of the path as follows:
<Route path=”testpath” element={<Test />} />
Now, Let’s implement a basic router with V6
1. Create a React App with create-react-app
npx create-react-app demo-router
2. install react-router-dom
npm install [email protected] or yarn install [email protected]
3. Now copy and paste the below code into App.js
import React from "react";
import { BrowserRouter as Router,
Routes,
Route,
Link
} from "react-router-dom";
const Home = ()=> <h2>Home</h2>
const About = ()=> <h2>About</h2>
const Contact = ()=> <h2>Contact</h2>
const UserProfile = () =><h2>This my user profile</h2>
const Demo = () =><h2>This just a demo</h2>
function Users() {
return (
<div>
<nav>
<Link to="me">My Profile</Link><br />
<Link to="demo">Demo</Link>
</nav>
<Routes>
<Route path="me" element={<UserProfile />} />
<Route path="demo" element={<Demo />} />
</Routes>
</div>
);
}
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="about">About</Link>
</li>
<li>
<Link to="contact">Contact</Link>
</li>
<li>
<Link to="users">Users</Link>
</li>
</ul>
</nav>
<Routes>
<Route path="/" element={ <Home /> } />
<Route path="about" element={ <About />} />
<Route path="contact" element={ <Contact /> } />
<Route path="users/*" element={<Users />} />
</Routes>
</div>
</Router>
);
}Conclusion
In my view, React Router is getting easier one major version after another. Although React Version 6 has some major changes that make it easier for developers to set up React Router, you might need to take be cautious before you upgrade from V5 to V6. The official documentation recommends developers wait until they complete the work on backward compatibility.
