Как настроить Dynami c UI Routing для простого приложения Fulcro - PullRequest
Новая
       11

Как настроить Dynami c UI Routing для простого приложения Fulcro

0 голосов
/ 21 апреля 2020

Я просканировал некоторые документы web и video для маршрутизации. Но я не могу заставить Dynami c UI Routing работать на простом наборе страниц.

root .cl js

(ns ui.root)
;; ...

(defsc Index [this props]
  {:query [:index]
   :ident (fn [] [:id :index])
   :route-segment ["index"]
   :initial-state {}}

  (h3 "Index"))

(defsc Landing [this props]
  {:query [:landing]
   :ident (fn [] [:id :landing])
   :route-segment ["landing"]
   :initial-state {}}

  (h3 "Landing"))

(defsc Settings [this props]
  {:query [:settings]
   :ident (fn [] [:id :settings])
   :route-segment ["settings"]
   :initial-state {}}

  (h3 "Setting"))


(dr/defrouter TopRouter [this {:keys [current-state] :as props}]
  {:router-targets [Game Settings Landing Index]
   :initial-state (fn [{:keys [current-state]}]
                    {:current-state current-state})}

  (case current-state
    :pending (dom/div "Loading...")
    :failed (dom/div "Failed!")
    (dom/div "No route selected.")))

(def ui-top-router (comp/factory TopRouter))


(defsc Root [this {:keys [router] :as props}]
  {:query [{:router (comp/get-query TopRouter)}]
   :ident (fn [] [:id :root])

   :initial-state (fn [_]
                    {:top-router (comp/get-initial-state TopRouter {:current-state :pending})
                     :index {:id 1}
                     :landing {:id 1}
                     :settings {:id 1}})

   :componentDidMount (fn [_] (log/info "Root Initial State /" (prim/get-initial-state Root {})))}

  (log/info "Root Props /" this props)
  (ui-top-router router {:current-state :pending}))

client.cl js

(ns client)
...

(app/mount! @app root/Root "app" {:initialize-state? true
                                  :foo :bar})

Q: Начальная загрузка дает этот вывод. Как мы передаем реквизит в Root компонент? Я ожидаю увидеть по крайней мере {:foo :bar}. 

INFO [ui.root:81] - Root Props / [object Object] {}
INFO [ui.root:53] - TopRouter Props / {:current-state nil, :route-factory #object[cljs.core.MetaFn], :pending-path-segment nil, :route-props nil}
INFO [ui.root:77] - Root Initial State / nil

В: Если это мое начальное состояние, правильны ли значения :query и :ident? И соответствуют ли они (: query +: идент) :route-segment? Им нужно? 

{:index {:id 1}
 :landing {:id 1}
 :settings {:id 1}}

В: Как нам начать первоначальный маршрут? Вызов этого не удастся с приведенным ниже сообщением. 

(dr/change-route app ["index"])

INFO [com.fulcrologic.fulcro.rendering.ident-optimized-render:146] - Optimized render failed. Falling back to root render.

>> ОБНОВЛЕНИЕ << </strong>

Мне удалось получить работающий Fulcro Root :initial-state, а также :query и :ident на дочерние компоненты.

При начальной загрузке маршрутизатор не работает с этим. 

INFO [beatthemarket.ui.root:61] - TopRouter Props / {:current-state nil, :route-factory #object[cljs.core.MetaFn], :pending-path-segment nil, :route-props {:index/id 1, :index/text "Index Text"}}

core.cljs:159 ERROR [com.fulcrologic.fulcro.routing.dynamic-routing:410] - will-enter for router target beatthemarket.ui.root/Index did not return a valid ident. Instead it returned:  [:index/id nil]
core.cljs:159 ERROR [com.fulcrologic.fulcro.routing.dynamic-routing:410] - will-enter for router target beatthemarket.ui.root/Index did not return a valid ident. Instead it returned:  [:index/id nil]

browser.cljs:25 shadow-cljs: WebSocket connected!
browser.cljs:25 shadow-cljs: REPL session start successful

core.cljs:159 INFO [com.fulcrologic.fulcro.algorithms.indexing:104] - component beatthemarket.ui.root/Index's ident ([:index/id nil]) has a `nil` second element. This warning can be safely ignored if that is intended.

Таким образом, команда, подобная (dr/change-route app (dr/path-to root/Index)), не выполняется с этим. 

react_devtools_backend.js:6 ERROR [com.fulcrologic.fulcro.routing.dynamic-routing:410] - will-enter for router target beatthemarket.ui.root/Index did not return a valid ident. Instead it returned:  [:index/id nil]

Это мои client.cl js и root .cl js выглядят так.

1 Ответ

0 голосов
/ 27 апреля 2020

Полагаю, вам сначала нужно исправить проблему Ident с вашим компонентом Index.

Работает ли маршрутизация для других компонентов?

...