Simple Router for React Apps
Tags: react, webdev
Published: 2022-09-03 22:33:23

---
title: Simple Router for React Apps
published: true
description: How to create a simple router without libraries
tags: react,webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwso9e3zmfhgvjozjgyf.png
---

Tools like [React Router](https://github.com/remix-run/react-router) provide a nice framework with which to think about and implement routing in your app. But what if you have a relatively small project that doesn't need complex routing logic?   

  
**Enter:** the browser's `window.location` object.
  
It provides all you need to create a simple 'routing' system for your app. Here's, for example, what the `window.location` object would like for this url: `http://localhost:3000/books/123456?key=abcd&searchterm=cats`:  


![window.location object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkyc7ftvck27oc8frzya.png)


  
So, what if we created a `Route` functional component that parsed the `location.href` and/or the `location.path` looking for strict matches, and otherwise returning a 404 page.  

Suppose we had a small library app and wanted to show just three pages: 
1. a home page at `/`
2. a page to view many books at `/books`
3. and a page to view an individual book's details: `/books/{bookID}` where `bookID` comes from a database (as-a-service like firebase).

Since only have a few simple requirements, we could just use `window.location` to do our own routing.

First we'll create an enum encapsulating the concept of having different 'pages' or routes:

![routes enum code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6her0qb5863kj6s48b8m.png)



Now, functions to validate the home (`/`) and books `(/books`) routes:


![valid books and home routes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjbu2mu8hwmyqj7ne2hk.png)



We return `null` here to represent that the given `location` is indeed not the one we want to render; we want to render the route that is alternatively returned.

Now for the individual book route:

![individual book route](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/so7o5b0lsis89uaaz02t.png)


This illustrates how quick and easy it can be to make a simple and powerful routing mechanism. Here, we use regex to match against the location's pathname to strictly determine whether the path is a valid one. 
  
For variable paths and url parameters, it's simple to parse them from the url. Here's an example of getting a path parameter:

![path parameter fetching code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1utts8k0oq3v6zjr5g3.png)


and for url parameters:

![url parameter fetching code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vekshzlesr5rbmtfbeq.png)



Finally, we can put these functions together inside the `Router` component to render the correct content:


![router component code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4legkyvczkcd5oa7bh0d.png)



Here, we put the validators into an array, and iterate over them until we get a match. Once the first passing validation happens, `break` takes us out of the iterator.

> **NOTE**: that since we're iterating over the validation functions in an array, the order of the validations is something to pay attention to 
  
Then we check to make sure that if `window.location` didn't pass any of our validations, we set the route to `NOT_FOUND`.

Finally, we check the route via a `switch` statement, and show the page we want to render!  
  
All you need next is to put `Router` in your `index.js` file:

![index.js file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvafqov5p2xm5zvbuzgb.png)  
  
Follow me on [Twitter](https://twitter.com/caleb_dre)!