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>