Client side routing explained

React router is the defacto standard for client side routing in React SPA application.
To understand how React router works ( and other type of client side routing libraries), first, we need to understand how client side router works.

Server side routing

On a server side web application the routes are rendered by the server using a template rendering engine of some sort.

Let's take the following Express web application.

const express = require("express")
const app = express()

app.set('view engine', 'pug')

app.get("/", (req, res) => {
    return res.render("index")
})

app.listen ...

in the example above when the client request the route "/" the express framework (server-side) renders a view from the index template and send it to the client.

Client side routing

CLient side routing is a bit different as the views are already present in the client codebase (not talking about server side rendering).

Normally a Single Page Application (SPA) should have a single entry point. Let's take as an example an express app serving a SPA.

const express = require("express")
const app = express()

app.use(express.static(path.join(__dirname, 'client/build')));

app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname+'/client/build/index.html'));
});


app.listen ...

In this case the express app is always serving the index.html file no matter what route the client is requesting.

On the client side, the requested route is accessible by using the window.location property (https://developer.mozilla.org/en-US/docs/Web/API/Window/location)

{
	"href": "https://davideandreazzini.co.uk/",
	"ancestorOrigins": {},
	"origin": "https://davideandreazzini.co.uk",
	"protocol": "https:",
	"host": "davideandreazzini.co.uk",
	"hostname": "davideandreazzini.co.uk",
	"port": "",
	"pathname": "/",
	"search": "",
	"hash": ""
}