Handle Routing in React Apps with React Router

What is React-Router

Many modern websites are actually made up of a single page, they just look like multiple pages because they contain components which render like separate pages. These are usually referred to as SPAs – single-page applications. At its core, what React Router does is conditionally render certain components to display depending on the route being used in the URL

To use React Router, you first have to install it using NPM:

npm install react-router-dom

You’ll need to import BrowserRouter, Route, and Switch from react-router-dom package:

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

First, you’ll need to set up your app to work with React Router. Everything that gets rendered will need to go inside the <BrowserRouter> element, so wrap your App in those first. It’s the component that does all the logic of displaying various components that you provide it with.

// index.js
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, 
    document.getElementById('root')
)

Next, in your App component, add the Switch element (open and closing tags). These ensure that only one component is rendered at a time. If we don’t use this, we can default to the Error component, which we’re going to write later.

function App() {
    return (
        <main>
            <Switch>
                
            </Switch>
        </main>
    )
}

It’s now time to add your <Route> tags. These are the links between the components and should be placed inside the <Switch> tags.

To tell the <Route> tags which component to load, simply add a path attribute and the name of the component you want to load with component attribute.

<Route path='/' component={Home} />

In this case, we add exact to the Route tag. This is because the other URLs also contain “/”, so if we don’t tell the app that it needs to look for just /, it loads the first one to match the route, and we get a pretty tricky bug to deal with.

function App() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/shop" component={Shop} />
            </Switch>
        </main>
    )
}

Now import the components into the app. You may wish to have them in a separate “components” folder to keep code clean and readable.

import Home from './components/Home';
import About from './components/About';
import Shop from './components/Shop';

Onto that error message I mentioned earlier, which loads if a user types an incorrect URL. This is just like a normal <Route> tag, but with no path. The Error component contains <h1>Oops! Page not found!</h1>. Don’t forget to import it into the app.

function App() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/shop" component={Shop} />
                <Route component={Error} />
            </Switch>
        </main>
    )
}

So far, our site is only navigable by typing the URLs. To add clickable links to the site, we use the Link element from React Router and set up a new Navbar component. Once again, don’t forget to import the new component into the app.

Now add a Link for each component in the app and use to="URL" to link them.

function Navbar() {
  return (
    <div>
      <Link to="/">Home </Link>
      <Link to="/about">About Us </Link>
      <Link to="/shop">Shop Now </Link>
    </div>
  );
};