In this video we'll look at creating a small router.

I originally looked at using one of the available libraries to set up routing. I considered reitit and bidi but in the end decided to figure out how to do it myself.

It turns out that whenever you change the hash part of a url - everything following a # at the end of a url you get a hashchange event. You can handle that with

( .addEventListener js/window "hashchange" # ( handleroutes routes %))

where handleroutes is your function to actually handle the routes.

You can then get the actual value of that last hash part of the url with:

( .-location.hash js/window)

Once you map that to whatever function you want you update the history and mount the new page:

( .history.replaceState js/window {} nil loc) ( mount newpage)

All the code is up on GitHub: https://github.com/zamansky/shadow-cljs-demo

There are still things I need to figure out. Specifically, how can I route without the #. That is, I can do it, but the page reloads every time rather than just remounting the component I want.

The video goes through the entire process. Enjoy.

<iframe width="560" height="315" src="https://www.youtube.com/embed/mbUHkfH6B9g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>