ReactJs article logo

Integrating React-Router with Create React App

This is a short how-to post about integrating React-Router with Create React App. I’m planning to write posts about some React specific functionality so this post will act as a starting point for other posts.

I assume you know what CRApp is and how to start with it. If not, please follow instructions here.

Adding React-Router and sample routes

First thing we need to do is to install latest React-Router (we will be using version > 4). We only need Web portion of React-Router:

npm install react-router-dom --save

Scaffolding

In src folder add routes.js file then create Components and Pages folders. Create Navigation.js file in Components folder and then add following JS files to Pages folder: HomePage, NotFound, Page1, Page2 and Page3. Structure of your app should be similar to this below (there is a link to github repo with finished code at the end of this post ):

- public
- src
  - Components
    - Navigation.js
  - Pages
    - HomePage.js
    - NotFound.js
    - Page1.js
    - Page2.js
    - Page3.js
  - routes.js
  - ... other files auto-generated by Crapp

Adding Router and sample sample routes

Now it is time to add BrowserRouter, sample Navigation for user and sample routes to our application. In src/App.js file add following three imports:

import Navigation from './Components/Navigation';
import { BrowserRouter as Router } from 'react-router-dom'
import Routes from './routes';

Navigation component will output HTML with React-Router enabled links (we will look into this file in few moments). BrowserRouter is the component responsible for routing itself. Last import gives us a components that defines few routes.

Still in App.js, we need to add Router and Routes to render method:

render() {
  return (
    <Router>
      <div>
       ...existing code goes here...
       {<Routes />}
     </div>
    </Router>
  );
}

In route.js we will define few routes. Idea is simple, for a given url we want to render specific component. When users navigates to a url that isn’t recognised, we will render NotFound component. Below is a part of routes.js file:

<Route exact path="/" component={HomePage} />
<Route path="/page1" component={Page1} />
<Route path="/page2" component={Page2} />
<Route path="/page3/:id" component={Page3} />
<Route component={NotFound} />

If you have experience with some other routing frameworks / libraries you probably know what is “/page3/:id“. This is wildcard that allows to create routes with dynamic parameters. For example,  navigating to /page3/1 or /page3/2 is still going to render Page3 component but value of id parameter will differ accordingly.

Please check github repo to see contents of Page1, Page2, Page3 and NotFound components – those are just simple React Components.

No, when you start you app you should see something similar to screenshot below. When you click on a specific link, you should see that url changes as well as content. Voilà! You have now React-Router integrated into Create React App,

React-Router with Create React App

Here you can find completed code: github

Leave a Reply

Your email address will not be published. Required fields are marked *