Jan 2022 Update: This project is meant to be written using React Router v5. React Router v6 introduces breaking changes and your project will not work using these instructions if you install v6. Check out React Router’s documentation to learn more about upgrading from v5 to v6.
In order to use React Router, you will need to include the react-router-dom
package (the version of React Router built specifically for web browsers) in your project by using npm
like so:
npm install --save [email protected]
Once you have added react-router-dom
to your project, you can import one of its router components to add routing to your project. React Router provides several router components however the most common one is the BrowserRouter
. The other option and the reasons you might choose one over the other are outside the scope of this lesson, but you can read more about that in the React Router Documentation.
For the sake of simplicity and readability, it is common to alias BrowserRouter
as Router
when importing, like so:
import { BrowserRouter as Router } from ‘react-router-dom’
Instructions
Task 1
Before we can install react-router-dom
, we need to install all of the dependencies for this project. This can be done by running the command below in your terminal:
npm install
Hint
In the root directory of the project, run the command
npm install
You should see a folder called node_modules appear in your file system.
Task 2
Next, install [email protected]
.
To verify that you have successfully added the package to your project, navigate to package.json and check that react-router-dom
appears in the “dependencies”.
Hint
Your terminal command should look like this:
npm install --save [email protected]
Task 3
In App.js import BrowserRouter
from react-router-dom
and rename it to Router
.
To confirm that you’ve followed these steps properly, run npm start
in your terminal to start your application. Then, inspect the console and you should see no red errors related to react-router-dom
(you may see yellow warnings though!).
Hint
The syntax for importing a component and renaming it looks like this:
import { ComponentName as AliasName } from `name-of-package`;