fulcrologic / fulcro

A library for development of single-page full-stack web applications in clj/cljs
http://fulcro.fulcrologic.com
MIT License
1.55k stars 140 forks source link

dynamic routing question #545

Closed challmand closed 1 year ago

challmand commented 1 year ago

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

appreciate any help with this.

challmand commented 1 year ago

I am going to try on the fuclro slack channel since this really isnt an issue with fulcro itself, but more of an understanding question.