React Router — Navigating An SPA

The beauty of Javascript is that it allows us to have page updates without actually refreshing the page. Because of this we have the power to do so much with some simple starter HTML on a single page. Implementing React Router when using React is an amazing tool to harness this ability.

Using React makes it incredibly easy to build a robust SPA. Adding React Router to it opens up endless possibilities. It allows you to create an SPA that doesn’t even seem like an SPA at all. We can create different “routes” and “pages” with ease that are in fact just updating the DOM as Javascript does best.

How To Use React Router

In order to use React Router in your React app you do need to do a little bit of setup first. First you just need to install the package:

npm install react-router-dom

Next you’re going to want to import the components that will allow you to start building routes into your App.js. Here’s an example from a recent project I built:

And finally here’s an example of how you take those imports and actually use them to build the routes:

Everything needs to live inside the top level “Router”, then each route lives within the Switch as these will be the different routes to switch between. Note that within the switch it will render the first one matching the url. That’s why you often need to specify “exact path” as opposed to just “path”.

Use Cases For React Router

There are several different things that React Router gives us the ability to do with ease. Obviously the first one as shown above is to create multiple “routes” throughout our SPA, and it’s as simple as defining the routes.

Another great tool we get from React Router is Link. Just like with the other components we need to import the link.

import {Link} from 'react-router-dom'

Then we can easily link between any of the new routes we just set up by simply calling the route we defined earlier.

These links can also link to routes outside of your own app.

Another powerful tool we get from React Router comes imbedded when we attach a component to render on a particular route. We get certain url information that can be very useful like history and params.

For instance we can get the id of a resource to use to build a show route from params like this:

The “routeInfo” is just a variable name that holds that new data we get from React Router.

Here’s an example of how we use the history data:

This is submitting a login form. Once all the logic runs to complete the logging in, we can use the history data from React Router to redirect the user to a new “page” once they’ve logged in.

Wrap Up

These are a few of the ways that React Router can add so much to your React app. It’s very easy to get started and to implement. Now your SPA can so much more complexity without having to add a ton of code. We’re able to harness the power of Javascript that we’re already using and just expand on that to do even more.