foo.cljs

(ns common.routes
  (:require [reagent.core :as r :refer [atom]]
            [secretary.core :as s :refer-macros [defroute] :include-macros true]
            [accountant.core :as a]))

(s/set-config! :prefix "/")

(defn nav []
  [:div [:a {:style {:padding "5px"} :href "/"} "Home"]
   [:a {:style {:padding "5px"} :href "/spaces/step/1"} "Step One"]
   [:a {:style {:padding "5px"} :href "/spaces/step/2"} "Step Two"]])

(defn home []
  [:div [nav]
   [:div [:h1 "Home"]]])

(defn step-page [step-id]
  [:div [nav]
   [:div [:h1 (str "Step " step-id)]
    [:div [:a {:href "/"} "Home"]]]])

(defonce current-page (r/atom [home]))

(defroute "/" {}
  (reset! current-page [home]))

(defroute "/spaces/step/:step-id" {step-id :step-id}
  (reset! current-page [step-page {:step-id step-id}]))

(defn router-component []
  @current-page)

(defn mount-root []
  (r/render [router-component] (.getElementById js/document "app")))

(defn init-routes! []
  (a/configure-navigation!
   {:nav-handler #(s/dispatch! %1)
    :path-exists? #(s/locate-route %1)})
  (a/dispatch-current!)
  (mount-root))