Introducing React Router

Introduction

Historically on the web, you would navigate to different pages and the location of the current page would be in the location bar of the browser. The back and forward buttons would work as expected.

These days, in single-page apps, the above features don't really work quite the same. Everything that occurs in modern single-page apps happens on one page - behind the scenes, JavaScript changes the UI and facilitates functionality in the background. When this is the case, we need a routing solution for the back and forward buttons to function as intended. Routing is what determines "how an application responds to a client request to a particular endpoint", according to the Express documentation.

While Backbone for example has routing built in, React does not. Thankfully, there is a community-based solution that is utilized by PayPal, Vimeo, and Uber: React Router.

Key Concept: Adding the Router

You'll probably recognize the navigation bar, it's usually at the top or left side of a website, and allows users to easily browse the different sections of a website.

A potential sitemap for a website (with local links) might be represented as follows:

// Home
http://localhost:8000/

// Products
http://localhost:8000/#/products

// Blog
http://localhost:8000/#/blog

// Catalog
http://localhost:8000/#/catalog

// Sign-Up
http://localhost:8000/#/signup

// 404 Error Page
http://localhost:8000/#/error

Routes are endpoints that can be accessed via the location bar in the browser. Each section of the website will have a route set up via the router. To get things up and running you'll need to install the React Router and React Router DOM, like so (feel free to remove the @experimental from the end of these commands if you don't want the bleeding edge latest):

npm install react-router@experimental 
npm install react-router-dom@experimental

Key Concept: Exporting Components and Adding Links

We can add links to each page in the navigation bar and export a component for each page in a single javascript file, like so:

import React from "react";

export function Home() {
  return (
    <div>
      <h2>[Home Page]</h2>
      <nav>
        <Link to="products">Products</Link>
        <Link to="blog">Blog</Link>
        <Link to="catalog">Catalog</Link>
        <Link to="signup">Sign-Up</Link>
      </nav>
    </div>
  );
}

export function Products() {
  return (
    <div>
      <h2>[Products]</h2>
    </div>
  );
}

export function Blog() {
  return (
    <div>
      <h2>[Blog]</h2>
    </div>
  );
}

export function Catalog() {
  return (
    <div>
      <h2>[Catalog]</h2>
    </div>
  );
}

export function SignUp() {
  return (
    <div>
      <h2>[SignUp]</h2>
    </div>
  );
}

In our index.js file, we'll need to render what's called the BrowserRouter:

import React from 'react';
import { render } from 'react-dom';
import App from './App';

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

This would work for a site with a navigation bar that looks something like this:

And in app.js, we'll need to import each page:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

class App extends Component {
  render() {
    return (
    <Router>
        <div>
          <h2>Trend</h2>
          <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
          <ul className="navbar-nav mr-auto">
            <li><Link to={'/'} className="nav-link"> Home </Link></li>
            <li><Link to={'/products'} className="nav-link">Products</Link></li>
            <li><Link to={'/blog'} className="nav-link">Blog</Link></li>
            <li><Link to={'/catalog'} className="nav-link">Catalog</Link></li>
            <li><Link to={'/signup'} className="nav-link">Sign-Up</Link></li>
          </ul>
          </nav>
          <hr />
          <Switch>
              <Route exact path='/' component={Home} />
              <Route path='/products' component={Products} />
              <Route path='/blog' component={Blog} />
              <Route path='/catalog' component={Catalog} />
              <Route path='/signup' component={Signup} />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

Conclusion

The React Router can be used to enhance the functionality of your React web page's user interface. This is ideal if you want the URL in the location bar to change depending on which area of the site the user is currently viewing. This can be important, because users can then utilize bookmarks to get back to a key part of your website they want to return to, and use the back and forward buttons in their browser to navigate your website in a way that they've grown accustomed to.