#101 of React-Router

Our browsers are configured to send to http requests to the server. This requires a lot of resources and time. We can save both time and resources by avoiding sending requests to the server and instead render the requested page with the help of client-side routing. This is made possible in many front-end frameworks and libraries. This post will give you a basic sense of client-side routing using react-router NPM module.

NPM Modules required: react-router-dom

Note: We will be using the React boiler-plate used in this GitHub Repository. Also, this example uses JSX which is compiled using babel.

The best way to understand is by considering a running application.

Step 1: We will import BrowserRouter and Route named imports form the react-router-dom NPM module. The below code achieves our task.

import { BrowserRouter, Route } from 'react-router-dom';

We have imported the imports needed.

Step 2: Define our components that are to be rendered on reaching a particular route.

const LandingPage = () => (
    <div>
        This is the Landing Page Component
    </div>
);

const EditPage = () => (
    <div>
        This is the EditPage Component
    </div>
);

Stateless function components are used for simplicity. They are defined locally in the app.js file itself. The stateless function component used are LandingPage and EditPage components.

Step 3: We need to define our routes variable of const type. The Definition goes as this →

const routes = (
    <BrowserRouter>
        <div>
            <Route path='/' component={ LandingPage } exact={true} />
            <Route path='/edit' component={ EditPage } />
        </div>
    </BrowserRouter>
);

The BrowserRouter can pass only one child. Since we have multiple routes we will use a wrapper div to encompass both the Routes.

The Route component requires the path and component properties for sure! We need to render the components which need to be rendered for our required routes. In this example, the routes required are edit route and the root[ ‘/’ ] route. Our landing page is generally determined with ‘/’ path. So, the component that needs to be rendered on reaching the ‘/’ route is the LandingPage component. Hence, we pass LandingPage as JSX to the component props. Similarly, the edit route is defined.

You may have noticed the exact prop as well. You will understand its use at other part of this post.

Step 4: Render the React app to DOM. This is done using the given code snippet.

ReactDOM.render(routes, document.getElementById('app'));

Even after applying this code, our app will break because the browser will try and send request to the server. In other words when you test your app to reach the /edit route as a http request, it will receive a 404 error code. In order to overcome this problem we will have to configure our webpack.config.js file. We will add the following to the devServer property in the module.exports object in the file.

historyApiFallback: true

What the above line states is, once we get a 404 error, we will render the index.html again with the appropriate component which is compliant to the logic used. In simple words, logic used in React determines the component which will be rendered.

We have achieved client side routing. All that’s left is to render the correct component. For this we define the exact prop in the Route component. Otherwise we shall get an output similar to the one shown below:-

The reason we are able to see two components rendering is because the React router tries to match at least the first ‘/’ of the path defined. Which means it tries to match ‘/’ of ‘/edit’ first and then matches the whole string. Thus we see the two components getting rendered simultaneously.

Result, we have achieved our purpose and rendered the required component on the client-side itself.