Using React Router 4: Lesson 3 of 12

Adding the Router

Up Next

Our First Route

Autoplaying in 7 seconds!


Adding the Router

Now that the base project is setup locally, let's get the react router package installed and added to our project. We need to make sure we are using the correct package. The package to use for routing react projects in the browser is called react-router-dom. It gives us some objects we can use in our JSX, such as BrowserRouter, Route, and Link. We will use each of these as we explore this project.

First, let's install the package.

yarn add react-router-dom

Next, in src/fe/app.js, we need to import the BrowserRouter from react-router-dom.

Table of Contents

    import { BrowserRouter as Router } from 'react-router-dom';

    Next, we need to wrap our project in this router.

    const renderApp = () => {
            <App />
        , root,

    Open up a browser to localhost:3000, and you will see nothing has changed. We still have our project like we did before. However, if we change the URL to something like locahost:3000/somethingelse, it still shows our users table. In the next video, we will add our first route.

    Alex Sears

    2 posts

    Developing is not only my job but also my passion. I love to teach myself new things as much as I love teaching others. The more people we get involved in this little thing we call "web development," the better we can make it. I mean, we always need more cat videos, right?