Using React’s Router in Single Page Web Apps (basics)

Let’s face it. With SPAs, the future is here.

Building an SPA is super cool, and super exciting. Why is it so exciting? I guess it’s that intense feeling of accomplishment when you change the page without accessing a new web page. It gives us a haughty air of superiority over the web of the 90s — “We have conquered you, feeble one.” Or maybe it’s the fluidity. The sense of power and authority in knowing that users’ eyes will be impenetrably glued to their screens, devoid of the quick coffee-sip or knee-drum routine which hath populated the protocol pauses of the past. “You are mine forever”, sayeth the screen to the beholder.

So, in that spirit, here are the basics of React Router.

For NPM, inside your React project, install react-router-dom.

You’ll want to import the BrowserRouter component from the package.

The BrowserRouter is our wrapper. This will wrap all the routes to let React know that this is a router. Here’s an example:

import { BrowserRouter as Router } from "react-router-dom"
const App = () => {
  return (
    <Router>
      <div>      
        ...routes
      </div>
    </Router>
  )
}

The next thing we’ll need is the Route component (also from react-router-dom).

The Route component is what we use each time we define a route. It will contain a path as well as a component to render whenever the url path is matched. Example:

import { BrowserRouter as Router, Route } from "react-router-dom"
import { nav } from "/components/nav"
import { homepage } from "/components/homepage"
const App = () => {
  return (
    <Router>
      <div>      
        <Route path="/" component={nav}>
        <Route path="/home" component={homepage}>
      </div>     
    </Router>
  )
}

In this example, we will render the nav component on route "/" and we will match the homepage component on route "/home”.

However, there’s a catch! Just like in a regular Node/Express app, the "/" route will also match all other routes! So our nav component will be rendered on both the "/" route and the "/home" route.

Of course, in large applications, you’ll need a way to fix this. There are two ways…

The first option is to use the exact keyword. Then the component will only be rendered on an exact match of the url path. Example:

import { BrowserRouter as Router, Route } from "react-router-dom"
import { welcome } from "/components/welcome"
import { homepage } from "/components/homepage"
const App = () => {
  return (
    <Router>
      <div>     
        <Route exact path="/welcome/home" component={homepage}>      
        <Route exact path="/welcome" component={welcome}>
      </div>    
    </Router>
  )
}

The second option is to use another component from the library called Switch. Just like a plain JavaScript switch case, this will only match one route (whichever one matches first). Example:

import { 
  BrowserRouter as Router, 
  Route, 
  Switch } from "react-router-dom"
import { welcome } from "/components/welcome"
import { homepage } from "/components/homepage"
const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/welcome/home" component={homepage}>
        <Route path="/welcome" component={welcome}>
      </Switch>
    </Router>
  )
}

Notice that even though the url path welcome/home should match both routes, we will only render the first matched route, thereby rendering the homepage component. Pretty cool, huh!

That is the basic setup and use of the router; however, there is much more to explore with this library, so check out the documentation for all the goodies!

If you’re just getting started with SPAs, then I hope this was helpful and best of luck on your adventures!