diff --git a/doc/frontend/browser.md b/doc/frontend/browser.md index 08d3b4b1..edf4b5c1 100644 --- a/doc/frontend/browser.md +++ b/doc/frontend/browser.md @@ -18,6 +18,29 @@ request to the server. This means the URL will look normal, but the downside is that the server must respond to all routes with correct file (`index.html`). Check examples for simple Ring handler example. +### Anchor click handling + +HTML5 History router will handle click events on anchors where the href +matches the route tree (and other [rules](../../modules/reitit-frontend/src/reitit/frontend/history.cljs#L84-L98)). +If you have need to control this logic, for example to handle some +anchor clicks where the href matches route tree normally (i.e. browser load) +you can provide `:ignore-anchor-click` function to add your own logic to +event handling: + +```clj +(rfe/start! + router + {:use-fragment false + :ignore-anchor-click (fn [e el] + (not= "false" (gobj/get (.-dataset el) "reititHandleClick")))}) + +;; Use data-reitit-handle-click to disable Reitit anchor handling +[:a + {:href (rfe/href ::about) + :data-reitit-handle-click false} + "About"] +``` + ## Easy Reitit frontend routers require storing the state somewhere and passing it to diff --git a/modules/reitit-frontend/src/reitit/frontend/history.cljs b/modules/reitit-frontend/src/reitit/frontend/history.cljs index 025141aa..333c8c95 100644 --- a/modules/reitit-frontend/src/reitit/frontend/history.cljs +++ b/modules/reitit-frontend/src/reitit/frontend/history.cljs @@ -78,6 +78,9 @@ (if (exists? js/location) (.getDomain (.parse Uri js/location))) + ignore-anchor-click-fn (or (:ignore-anchor-click this) + (constantly true)) + ;; Prevent document load when clicking a elements, if the href points to URL that is part ;; of the routing tree." ignore-anchor-click @@ -99,6 +102,7 @@ ;; isContentEditable property is inherited from parents, ;; so if the anchor is inside contenteditable div, the property will be true. (not (.-isContentEditable el)) + (ignore-anchor-click-fn e el) (reitit/match-by-path router (.getPath uri))) (.preventDefault e) (let [path (str (.getPath uri) @@ -134,15 +138,23 @@ - on-navigate Function to be called when route changes. Takes two parameters, ´match´ and ´history´ object. Options: - - :use-fragment (default true) If true, onhashchange and location hash are used to store current route." + - :use-fragment (default true) If true, onhashchange and location hash are used to store current route. + + Options (Html5History): + - :ignore-anchor-click Function (event, anchor element) to check if Reitit + should handle click events on the anchor element. By default + hrefs matching the route tree are handled by Reitit." ([router on-navigate] (start! router on-navigate nil)) ([router on-navigate {:keys [use-fragment] - :or {use-fragment true}}] - (let [opts {:router router - :on-navigate on-navigate}] + :or {use-fragment true} + :as opts}] + (let [opts (-> opts + (dissoc :use-fragment) + (assoc :router router + :on-navigate on-navigate))] (-init (if use-fragment (map->FragmentHistory opts) (map->Html5History opts))))))