Web Development: How to Handle Routing in React

Monday, November 21, 2016

How to Handle Routing in React

In one of my earlier tutorials, we saw how to get started with React and JSX. In this tutorial, we'll see how to get started with setting up and creating a React app. We'll focus on how to handle routing in a React app using react-router.

Getting Started

Let's start by initiating our project using Node Package Manager (npm).

mkdir reactRoutingApp
cd reactRoutingApp
npm init

Install the required react and react-dom libraries in the project.

npm install react react-dom --save

We'll be using webpack module bundler for this project. Install webpack and webpack development server.

npm install webpack webpack-dev-server --save-dev

We'll make use of Babel to convert JSX syntax to JavaScript. Install the following babel package in our project.

npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015

webpack-dev-server requires a config file where we'll define the entry file, output file, and the babel loader. Here is how our webpack.config.js file will look:

module.exports = {
    entry: './app.js',
    module: {
        loaders: [
            {
                exclude: /node_modules/,
                loader: 'babel-loader?presets[]=es2015&presets[]=react'
            }
        ]
    },
    output: {
        filename: 'bundle.js'
    }
};

Next we'll create app.html where the React app will get rendered.

<html>
    <head>
        <title>TutsPlus - React Routing Basic</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>

Let's create the entry point file app.js for our React application.

import React from 'react';
import {render} from 'react-dom';

const App = () => {
    return (
        <h2>{'TutsPlus - Welcome to React Routing Basic!'}</h2>
    );
};

render(
    <App />,
    document.getElementById('app')
);

As seen in the above code, we have imported react and react-dom. We created a stateless component called App which returns a title. The render function renders the component inside the app element in the app.html page.

Let's start the webpack server, and the app should be running and displaying the message from the component.

webpack-dev-server

Point your browser to http://localhost:8080/app.html and you should have the app running.

Creating React Views

Now we are up and running with our React application. Let's start by creating a couple of views for our React routing application. Just to keep it simple, we'll create all the components inside the same app.js file.

Let's create a main component called navigation in the app.js.

const Navigation = () => {
    return (
        <section>
            <App />
            <ul>
                <li>{'Home'}</li>
                <li>{'Contact'}</li>
                <li>{'About'}</li>
            </ul>
        </section>
    );
};

In the above Navigation component, we have the app title and a newly created menu for navigation to different screens of the app. The component is quite simple, with basic HTML code. Let's go ahead and create screens for Contact and About.

const About = () => {
    return (
        <section>
            <h2>{'Welcome to About!'}</h2>
        </section>
    );
};

const Contact = () => {
    return (
        <section>
            <h2>{'Welcome to Contact!'}</h2>
        </section>
    );
};

We just created a component to render the About and Contact screens.

Connecting Views Using react-router

In order to connect different views we'll make use of react-router. Install the react-router using npm.

npm install react-router --save

Import the required library from react-router in app.js.

import {Link, Route, Router} from 'react-router';

Instead of specifying which component to render, we'll define different routes for our application. For that we'll make use of react-router.

Let's define the routes for the Home screen, Contact screen, and About screen.

render(
    <Router>
        <Route
            component={Navigation}
            path="/"
        />
        <Route
            component={About}
            path="/about"
        />
        <Route
            component={Contact}
            path="/contact"
        />
    </Router>,
    document.getElementById('app')
);

When the user visits the / route, the Navigation component gets rendered, on visiting /about the About component gets rendered, and /contact renders the Contact component.

Modify the About and Contact screens to include a link back to the home screen. For linking screens, we'll use Link, which works in a similar way to the HTML anchor tag.

const About = () => {
    return (
        <section>
            <h2>{'Welcome to About!'}</h2>
            <Link to="/">{'Back to Home'}</Link>
        </section>
    );
};

const Contact = () => {
    return (
        <section>
            <h2>{'Welcome to Contact!'}</h2>
            <Link to="/">{'Back to Home'}</Link>
        </section>
    );
};

Modify the Navigation component to include the link to the other screens from the home screen.

const Navigation = () => {
    return (
        <section>
            <App />
            <ul>
                <li>{'Home'}</li>
                <li>
                    <Link to="/contact">{'Contact'}</Link>
                </li>
                <li>
                    <Link to="/about">{'About'}</Link>
                </li>
            </ul>
        </section>
    );
};

Save the changes and restart the webpack server.

webpack-dev-server

Point your browser to http://localhost:8080/app.html, and you should have the app running with basic routing implemented.

Wrapping It Up

In this tutorial, we saw how to get started with creating a React app and connecting different components together using react-router. We learnt how to define different routes and link them together using react-router.

Have you tried using react-router or any other routing library? Do let us know your thoughts in the comments below.

Source code from this tutorial is available on GitHub.

Web Development