How to create a VanillaJS Router

Routers work on top of the History API exposed by the browser. Pushing to it adds an entry into the browser's history stack which then facilitates browser back and forward. Idea is to add to the stack and then render the content on every link click and add a listener on popstate event to react to browser back and forward. Finally add a handler to process route on load.

The ask is like this:

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

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

<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:

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.

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.

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.

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

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

Bringing it all together:

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

Final demo: This is what we are attempting to create: (check codesandbox demo)

...

Thank you for reading this far.

Collection of notes and musings

Collection of notes and musings

How to create a VanillaJS Router