Simple Guide to Creating a Single Page App with React Router

Here’s a quick setup guide to creating a basic single page app with React. The goal of this post is not to get into the finer details of React Router, but rather to get you off the ground. As always, please reference the docs if you’re looking for that detail. There are also obvious advantages and disadvantages to single page apps, but this blog post won’t examine them. Instead, we’ll just be taking a look at conditionally rendering components using React Router in a very basic setup.

React Router is an npm package, so installation is easy. There are several versions, but we’ll be using the browser one. Below, you’ll see dom appended to signify the web version.

npm install --save react-router-dom

Using ES6 modules, you can import the components that we need:

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

// wrap your App component in the BrowserRouter<BrowserRouter><App /></BrowserRouter>

Wrapping your application in the BrowserRouter component will give your child components access to props from the native browser history API which allows the components to modify and match against url paths. However, the routing isn’t actually routing — it’s just conditionally rendering components based on a pattern match with the current url path. With that in mind, we can move on to the Route and Link components.

Route

Each Route component will have a prop that represents the path to match against. You then just specify the component that should render when the route is matched. For example:

<BrowserRouter><div><Route exact path="/" component={Home} /><Route path="/about" component={AboutMe} /><Route path="/contact" component={Contact} /><Route path="/projects" component={Projects} /></div><BrowserRouter />

***Take note of the fact that you’ll need to wrap any routes up in a div as the BrowserRouter component can only have one child node.

Above, you’ll see that we have three routes each with a path and a component prop. It’s important to note here that the match property that gets inherited by the children of BrowserRouter uses regex pattern matching that will also match on partial matches. That’s why the root component above has an exact keyword above it. Without it, we would render the Home component on each route because each contains a / in the beginning of their path.

There are a number of other features that are worth taking a look into in terms of routing. I’d suggest taking a look at the Switch component and thinking about how you could render multiple routes at once. That’s not part of the scope of this post. Again, I’d recommend checking out their docs for more info. You can also get information for native apps there as well. Remember that these aren’t routes in terms of static routing — they are simply conditionally rendering based on a pattern match from the location in the browser’s native APIs.

Link

Because we don’t want the page to load when we click on a link to a different part of the page, we can’t use your standard anchor tags for links. Instead, React Router ships a Link component that takes care of this for us. The Link is set up how you’d expect following the conventions that we’ve already seen.

<BrowserRouter><div><Link to="/">Home</Link><Link to="/about>About Me</AboutMe><Link to="/contact>Contact</Contact><Link to='/projects>Projects</Projects>

<Route exact path="/" component={Home} />  
<Route path="/people" component={People} />  
<Route path="/contact" component={Contact} />  
<Route path="/projects" component={Projects} />  

</div><BrowserRouter />

There’s also a NavLink component that has useful properties for showing which link is currently active, so that’s something to explore if you’re looking for that kind of styling.

That’s it! Obviously, you’d want to flesh out the components that you’re rendering here, but you can see how you could easily set up a basic portfolio site that loads as a single page app.