Hello, I think I am missing something. I am following the examples at https://book.fulcrologic.com/#_dynamic_router and have a basic routing example setup. My issue is when trying to pass in a URI directly to the address bar, it never changes the route and no matter what I enter it just uses the current set route. I can switch to different routes with (change-route!) just fine, but I want to be able to navigate with the browser address bar and using forward and back buttons to navigate as well.
Which portion of the dynamic_router documentation takes into account the actual URI path? Or is this built in and I have something hooked up wrong? I have a very simple routing example.
From the youtube videos on dynamic routing and the documentation it seems like it should just work, but its does not seem to be in my case.
(ns votann.client
(:require
[votann.mutations :as api]
[com.fulcrologic.fulcro.routing.dynamic-routing :as dr :refer [defrouter]]
[com.fulcrologic.fulcro.application :as app]
[com.fulcrologic.fulcro.components :as comp :refer [defsc]]
[com.fulcrologic.fulcro.react.version18 :refer [with-react18]]
[com.fulcrologic.fulcro.dom :as dom]))
(defonce app (-> (app/fulcro-app)
(with-react18)))
(defsc Main [this _]
{:ident (fn [] [:component/id ::main])
:query [:main]
:initial-state {:main "stuff"}
:route-segment ["main"]
:will-enter (fn [app _]
(js/console.log "Will enter main")
(dr/route-immediate [:component/id ::main]))
:allow-route-change? (fn [this _]
(js/console.log (comp/get-ident this) "props")
true)}
(dom/button {:onClick #(dr/change-route! this ["settings"])} "Go to settings"))
(defsc Settings [this _]
{:ident (fn [] [:component/id ::settings])
:query [:main]
:initial-state {:main "settings"}
:route-segment ["settings"]
:will-enter (fn [app _]
(js/console.log "Will enter settings")
(dr/route-immediate [:component/id ::settings]))
:allow-route-change? (fn [this _]
(js/console.log (comp/get-ident this) "props")
true)}
(dom/button {:onClick #(dr/change-route! this ["main"])} "Go to main"))
(defrouter TopRouter [this {:keys [current-state pending-path-segment]}]
{:router-targets [Main Settings]}
(case current-state
:pending (dom/div "Loading...")
:failed (dom/div "Loading seems to have failed. Try another route.")
(dom/div "Unknown route")))
(def ui-top-router (comp/factory TopRouter))
(defsc Root [this {:root/keys [router]}]
{:query [{:root/router (comp/get-query TopRouter)}]
:initial-state (fn [params]
{:root/router {}})}
(dom/div {:id "list-content"}
(ui-top-router router)))
(defn ^:export init
"Shadow-cljs sets this up to be our entry-point function. See shadow-cljs.edn `:init-fn` in the modules of the main build."
[]
(app/mount! app Root "app")
(dr/change-route! app ["settings"])
(js/console.log "Loaded"))
(defn ^:export refresh
"During development, shadow-cljs will call this on every hot reload of source. See shadow-cljs.edn"
[]
;; re-mounting will cause forced UI refresh, update internals, etc.
(app/mount! app Root "app")
;; As of Fulcro 3.3.0, this addition will help with stale queries when using dynamic routing:
(comp/refresh-dynamic-queries! app)
(js/console.log "Hot reload"))
also in my browser console logs I am getting this error which is why in the above examples I set the props to _ in an effort to debug that issue.
taoensso.timbre.appenders.core.js:158 2023-08-27T20:17:00.051Z ERROR [com.fulcrologic.fulcro.components:782] - Props passed to votann.client/Main are of the type cljs.core/PersistentVector instead of a map. Perhaps you meant to `map` the component over the props? See https://book.fulcrologic.com/#err-comp-props-not-a-map
Hello, I think I am missing something. I am following the examples at https://book.fulcrologic.com/#_dynamic_router and have a basic routing example setup. My issue is when trying to pass in a URI directly to the address bar, it never changes the route and no matter what I enter it just uses the current set route. I can switch to different routes with (change-route!) just fine, but I want to be able to navigate with the browser address bar and using forward and back buttons to navigate as well.
Which portion of the dynamic_router documentation takes into account the actual URI path? Or is this built in and I have something hooked up wrong? I have a very simple routing example.
From the youtube videos on dynamic routing and the documentation it seems like it should just work, but its does not seem to be in my case.
also in my browser console logs I am getting this error which is why in the above examples I set the props to _ in an effort to debug that issue.
appreciate any help with this.