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:
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:
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:
Hint
In the root directory of the project, run the command
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:
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: