Get Started with React Router

Note

Throughout the course, challenges will be offered using CodeSandbox, where all the required packages will be pre-installed by default. However, in real-world scenarios or if you prefer to work locally on your machine, additional packages need to be installed to work with them.

Installation

To begin utilizing the React Router library, we first need to install it in our project using a package manager such as npm or yarn. Open the terminal in the project directory and execute one of the following commands:

Using npm:

bash
npm install react-router-dom

Using yarn:

bash
yarn add react-router-dom

Сheckup

To verify that the react-router-dom package has been added to the project, we can check the package.json file. By default, the dependencies object only includes the packages required for running and setting up a plain React project:

js
9
1
2
3
4
5
6
7
8
9
"dependencies": {
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-scripts": "5.0.1",
  "web-vitals": "^2.1.4"
},

After adding the package, we will observe the modified dependencies object with the react-router-dom package included (line 7):

js
99
1
2
3
4
5
6
7
8
9
10
"dependencies": {
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.13.0",
  "react-scripts": "5.0.1",
  "web-vitals": "^2.1.4"
},