8 Basic and Advanced React Router Tips

Routes, 404, links, redirects, asynchronous loading, and more

Image by the author.

Many consider React the best overall JavaScript framework for building web applications. One of the basics that you need to master is React routing.

React Router allows your web application to be organized into pages on different URLs, as you are used to with any other pages on the internet. Because React is just one big JavaScript script, all pages are loaded up and displayed immediately when the user clicks a link.

I will cover the basics as well as some advanced tips that include 404 pages, redirects, asynchronous pages, and a site map. I have used these techniques to build all my websites, including 7urtle.

Introduction to React Router

React routes use the package react-router-dom, so start by installing it:

npm i -D react-router-dom

Because I prefer functional programming, I am also using my @7urtle/lambda library from 7urtle to make my code more elegant. You can either rewrite those examples or install the library with:

npm i -D @7urtle/lambda

I will only use the library a couple of times here, so no worries.

Then create Routes.js next to your index.js:

This file will hold your Route configuration. A route with two pages looks like this:

Configuration is done through the children tag under the Switch parent.