React Routing in Plain React

React Router is one of the most popular React libraries, as it serves as a bridge between React’s SPA philosophy and more traditional multi page websites where links are used for navigation.

I personally found React Router a bit cumbersome to use. In addition, I generally don’t like having too many dependencies in my project. Fortunately, after searching a bit online, creating my own react router in plain react proved to be relatively straightforward.

Credits to the following from where I learnt some of the necessary concepts:

Without further ado…here is the code :) Star the repo if you like it (the repo also contains some useful comments and is better formatted than below).

import React from 'react';
import { useEffect, useState } from 'react';

window.addEventListener("click", function (event) {
const link = event.target.closest("a");
if (
!event.button &&
!event.altKey &&
!event.ctrlKey &&
!event.metaKey &&
!event.shiftKey &&
link &&
link.href.startsWith(window.location.origin + "/") &&
link.target !== "_blank"
) {
event.preventDefault();
navigate(link.href);
}
});

export default function Router ({routes, defaultComponent}) {

const [currentPath, setCurrentPath] = useState(window.location.pathname);

useEffect(() => {
const onLocationChange = () => {
setCurrentPath(window.location.pathname);
}

window.addEventListener('popstate', onLocationChange);

return () => {
window.removeEventListener('popstate', onLocationChange)
};
}, [])
return routes.find(({path, component}) => path === currentPath)?.component || defaultComponent
}


export function navigate (href) {

// update url
window.history.pushState({}, "", href);

// communicate to Routes that URL has changed
const navEvent = new PopStateEvent('popstate');
window.dispatchEvent(navEvent);
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ashok Khanna

Ashok Khanna

Masters in Quantitative Finance. Writing Computer Science articles and notes on topics that interest me, with a tendency towards writing about Lisp & Swift