Using React Router 4

Adding the Router

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.

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

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

const renderApp = () => {
  ReactDOM.render(
    <AppContainer>
      <Router>
        <App />
      </Router>
    </AppContainer>
    , 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.