Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
reitit routing clojurescript
(ns ^:figwheel-hooks reitit-routing
[reagent.core :as r]
[reagent.dom :as r.dom]
[reitit.frontend :as rf]
[reitit.frontend.easy :as rfe]
[reitit.coercion.spec :as rss]
[fipp.edn :as fedn]))
;; State
;; -----------------------------------------------------------------------------
(defonce match (r/atom nil))
(def about-screen-state (r/atom 0))
(defn increment-click!
(swap! state inc))
;; Components
;; -----------------------------------------------------------------------------
(defn screen-clicks
[:p (str "page count: " click-count)])
(defn home-page []
(let [state (r/atom 0)]
(fn []
[:h1 "Homepage"]
(println {:hello "hi"})
(js/console.log {:hello "hi"})
{:type "button"
:on-click #(rfe/push-state ::about)}
[:p "Welcome to the home page"]
[screen-clicks @state]
{:on-click #(increment-click! state)}
"Count for Glory!"]]])))
(defn about-page []
(let []
(fn []
[:h1 "About"]
{:type "button"
:on-click #(rfe/push-state ::homepage)}
[:p "Welcome to the about page"]
[screen-clicks @about-screen-state]
{:on-click #(increment-click! about-screen-state)}
"Count for Glory!"]])))
(defn current-page []
[:li [:a {:href (rfe/href ::homepage)} "Homepage"]]
[:li [:a {:href (rfe/href ::about)} "About"]]]
(if @match
(let [view (:view (:data @match))]
[view @match]))])
;; Router
;; -----------------------------------------------------------------------------
(def routes
{:name ::homepage
:view home-page}]
{:name ::about
:view about-page}]])
(defn init! []
(rf/router routes {:data {:coercion rss/coercion}})
(fn [m] (reset! match m))
;; set to false to enable HistoryAPI
{:use-fragment true})
(r.dom/render [current-page] (.getElementById js/document "root")))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment