React Routing in Plain React

React Routing in 50 Lines of Code

Ashok Khanna
1 min readMay 23, 2022


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 ="a");
if (
!event.button &&
!event.altKey &&
!event.ctrlKey &&
!event.metaKey &&
!event.shiftKey &&
link &&
link.href.startsWith(window.location.origin + "/") && !== "_blank"
) {

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

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

useEffect(() => {
const onLocationChange = () => {

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');



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