Skip to main content

C'est la Z

Clojurescript - building a simple router

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>

comments powered by Disqus