Steps to set up React Router

Step 1: Create a react project folder, open the terminal, and write the following command.

# Run this to use npm
npx create-react-app foldername
# Or run this to use yarn
yarn create react-app foldername

Step 2: Navigate to the root directory of your project using the following command.

cd foldername

Step 3: Now, install the React Router library

npm install react-router-dom
or
yarn add react-router-dom

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "react-router-dom": "^6.22.0"
}

React Router is an amazing library that was created by Remix. The purpose of React Router is to enable Client-Side routing in the React application, that is, by using React Router we can create different routes in our React app and can easily navigate to different pages without even reloading the page.

Client-side routing, facilitated by React Router, enables changing routes without page reloads, creating single-page applications (SPAs). React Router efficiently manages what is displayed on each route, making it a powerful and user-friendly library for seamless navigation in React applications.

We will discuss the following setup approach and different methods of React Router v6 in this article: