How To Implement a Single Page Application Using React-Router

Learn how to use the React router to develop a SPA website

Photo by Brando Makes Branding on Unsplash

What is SPA?

SPA stands for Single Page Application. It is a very common way of programming websites these days. The idea is that the website loads all the HTML/JS the first time you visit. When you then navigate, the browser will only rerender the content without refreshing the website.

This is used to make the user experience feel a lot smoother. You can tell when it’s a SPA or multi-page application when navigating between menus often because a multi-page application will reload, making the whole UI blink fast depending on the content. This is due to it refreshing the website. A SPA will instead feel smooth in the transaction as it simply shows other content without refreshing.

We will look at how we can use the React-Router to build one.

Developing the SPA

First, create the application template using create-react-app.

create-react-app app

Enter the newly created app folder and install the React Router, which we will use to create the SPA.

npm i react-router-dom --save

We will begin by modifying the created application, open up src/App.js and replace everything in it with the following:

Notice that we are returning the Main component? Let’s create it so the application doesn’t crash. Create a folder called layouts and a file in it called layouts/main.js. This file will hold the base layout of the application.

mkdir layouts
touch layouts/main.js

In the main.js, we will create a navbar that looks very bad, but we are here to learn React Router and not CSS. This will have navigation links to an about page and a contact page. Below the navbar, we will have a content div that will be used to render the selected link. This is a very common SPA…