Fragment issue

core.cljs

(ns frontend-re-frame.core
  (:require [re-frame.core :as re-frame]
            [reagent.core :as reagent]
            [reitit.core :as r]
            [reitit.coercion.spec :as rss]
            [reitit.frontend :as rf]
            [reitit.frontend.controllers :as rfc]
            [reitit.frontend.easy :as rfe]))

;;; Events ;;;

(re-frame/reg-event-db
 ::initialize-db
 (fn [_ _]
   {:current-route nil}))

(re-frame/reg-event-fx
 ::navigate
 (fn [db [_ & route]]
   ;; See `navigate` effect in routes.cljs
   {::navigate! route}))

(re-frame/reg-event-db
 ::navigated
 (fn [db [_ new-match]]
   (let [old-match   (:current-route db)
         controllers (rfc/apply-controllers (:controllers old-match) new-match)]
     (assoc db :current-route (assoc new-match :controllers controllers)))))

;;; Subscriptions ;;;

(re-frame/reg-sub
 ::current-route
 (fn [db]
   (:current-route db)))

;;; Views ;;;

(defn home-page []
  (fn []
    [:div
     [:h1  "This is home page"]
     [:button
      ;; Dispatch navigate event that triggers a (side)effect.
      {:on-click #(re-frame/dispatch [::navigate ::sub-page1])}
      "Go to sub-page 1"]
     [:br]
     [:a {:href "/sub-page1#foo"} "Go to sub-page 1 and fragment foo."]]))

(defn sub-page1 []
  [:div
   [:h1 {:style {:height "2000px"}} "This is sub-page 1"]
   [:p {:id "foo"}
    "Fragment identified paragraph"]])

;;; Effects ;;;

;; Triggering navigation from events.
(re-frame/reg-fx
 ::navigate!
 (fn [route]
   (apply rfe/push-state route)))

;;; Routes ;;;

(defn href
  "Return relative url for given route. Url can be used in HTML links."
  ([k]
   (href k nil nil))
  ([k params]
   (href k params nil))
  ([k params query]
   (rfe/href k params query)))

(def routes
  ["/"
   [""
    {:name      ::home
     :view      home-page
     :link-text "Home"
     :controllers
     [{;; Do whatever initialization needed for home page
       ;; I.e (re-frame/dispatch [::events/load-something-with-ajax])
       :start (fn [& params](js/console.log "Entering home page"))
       ;; Teardown can be done here.
       :stop  (fn [& params] (js/console.log "Leaving home page"))}]}]
   ["sub-page1"
    {:name      ::sub-page1
     :view      sub-page1
     :link-text "Sub page 1"
     :controllers
     [{:start (fn [& params] (js/console.log "Entering sub-page 1"))
       :stop  (fn [& params] (js/console.log "Leaving sub-page 1"))}]}]])

(defn on-navigate [new-match]
  (when new-match
    (re-frame/dispatch [::navigated new-match])))

(def router
  (rf/router
   routes
   {:data {:coercion rss/coercion}}))

(defn init-routes! []
  (js/console.log "initializing routes")
  (rfe/start!
   router
   on-navigate
   {:use-fragment false}))

(defn nav [{:keys [router current-route]}]
  [:ul
   (for [route-name (r/route-names router)
         :let       [route (r/match-by-name router route-name)
                     text (-> route :data :link-text)]]
     [:li {:key route-name}
      (when (= route-name (-> current-route :data :name))
        "> ")
      ;; Create a normal links that user can click
      (js/console.log route-name)
      [:a {:href (if (= route-name ::sub-page1)
                   "/sub-page1#foo"
                   (href route-name)
                   ;; (href route-name)
                   )} text]])])

(defn router-component [{:keys [router]}]
  (let [current-route @(re-frame/subscribe [::current-route])]
    [:div
     [nav {:router router :current-route current-route}]
     (when current-route
       [(-> current-route :data :view)])
     ]))

;;; Setup ;;;

(def debug? ^boolean goog.DEBUG)

(defn dev-setup []
  (when debug?
    (enable-console-print!)
    (println "dev mode")))

(defn mount-root []
  (re-frame/clear-subscription-cache!)
  (init-routes!) ;; Reset routes on figwheel reload
  (reagent/render [router-component {:router router}]
                  (.getElementById js/document "app")))

(defn ^:export init []
  (re-frame/dispatch-sync [::initialize-db])
  (dev-setup)
  (mount-root))