Log in from a computer to take this course

You'll need to log in from a computer to start Learn React Router. But you can practice or keep up your coding streak with the Codecademy Go app. Download the app to get started.

apple storegoogle store
Learn

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 here.

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`;

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?