Setting Up React Router

With Version 6

This blog will mainly focus on setting up a Single Page Application(SPA) with nested routes and additional features.

Prerequisites: A basic knowledge of React is required.

The blog is grouped into the following parts:

1. Installation
2. Setting up a basic route
3. Using nested route
4. Index Route & Non-matching path
5. Pathless Routes

1. Installation

To install the latest version of the react-router-dom , run the following command in your terminal/console

npm install react-router-dom@6

alternatively, you can install it using yarn as follow

yarn add react-router-dom@6

2. Setting up a basic route

In our index.jsx , let’s wrap our <App /> component with the BrowserRouter. The BrowserRouter uses the history API: pushState, popState, and replaceState events to keep track of changes in the URL.