How to write a VanillaJS Router
Tags: javascript, router
Published: 2022-09-05 08:15:43


![Photo by <a href="https://unsplash.com/@juanjodev02?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Juanjo Jaramillo</a> on <a href="https://unsplash.com/s/visual/27a45f8b-2ba4-44c9-aa58-53f76f508a28?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecap3q6wjmvs1z2rodah.jpg)

The ask is like this:

1. React to link clicks by showing route specific content on the page.
2. When user clicks on browser back or forward, the correct route and its content should be loaded.
3. If user refreshes, content for the current route should be loaded.

---
To start with, make your HTML page look like this:

```html
<body>
    <div id="nav"></div>
    <div id="app"></div>

    <script src="src/index.js"></script>
</body>
```

Now in our `index.js`, lets add the following config:

```js
const routes = {
  '/': {
    linkLabel: 'Home',
    content: `I am in home page`
  },
  '/about': {
    linkLabel: 'About',
    content: `I am in about page`
  },
  '/friends': {
    linkLabel: 'Friends',
    content: `I am in friends page`,
  },
};
```

At this point it is clear that we are trying to create a config powered router. This means, we will need to create the nav items and then register the click handlers.

Let's add functions for them.

```js
const app = document.querySelector('#app');
const nav = document.querySelector('#nav');

// function to create new nav items
const renderNavlinks = () => {
  const navFragment = document.createDocumentFragment();
  Object.keys(routes).forEach(route => {
    const { linkLabel } = routes[route];

    const linkElement = document.createElement('a')
    linkElement.href = route;
    linkElement.textContent = linkLabel;
    linkElement.className = 'nav-link';
    navFragment.appendChild(linkElement);
  });

  nav.append(navFragment);
};

// function to register click handlers
const registerNavLinks = () => {
  nav.addEventListener('click', (e) => {
    e.preventDefault();
    const { href } = e.target;
    history.pushState({}, "", href);
    navigate(e); // pending implementation
  });
};
```

We now need to implement the `navigate` function. It will handle the actual navigation.

```js
const renderContent = route => app.innerHTML = routes[route].content;

const navigate = e => {
    const route = e.target.pathname;
    // this is responsible for adding the new path name to the history stack
    history.pushState({}, "", route);
    renderContent(route);
};
```

Now, all we have left to do is to is to handle the pop state event (handle browser back and forth) and to handle the initial page load.

```js
const registerBrowserBackAndForth = () => {
  window.onpopstate = function (e) {
    const route = location.pathname;
    renderContent(route);
  };
};

const renderInitialPage = () => {
  const route = location.pathname;
  renderContent(route);
};
```

Bringing it all together:

```js
(function bootup() {
  renderNavlinks();
  registerNavLinks();
  registerBrowserBackAndForth();
  renderInitialPage();
})();
```

Final demo:
This is what we are attempting to create: (check codesandbox demo)
{% codesandbox https://codesandbox.io/embed/vanilla-js-router-edhpfg %}

...

Thank you for reading this far.