如何为一个简单的Fulcro应用程序设置动态UI路由

Question

我已经浏览了一些用于路由的网站和视频文档。但是，我无法使动态UI路由为一组简单的页面工作。

root.cljs

(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.cljs

(ns client)
...

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

Q:初始负载提供了这个输出。如何将道具传递到根组件中？我希望至少能看到{: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 + :ident)是否对应于: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.

>>更新<<

我成功地获得了支点根: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.cljs和root.cljs，看上去像这样。

Answer 1

我认为您的根初始状态应该调用(comp/get-initial-state Index)。您在Index上设置了初始状态，但它与Root提供的初始状态不同。

而且，支点(和响应)的一个重要部分是，您构建了一个组件树和一个数据树，它们需要匹配。

按照这里的方式，“根”和“索引”之间没有联系，因为根只呈现(ui-top-router router)。您是通过查询{:root/index (comp/get-query Index)}来获取索引数据的，但不是通过拥有根调用索引并传递该数据来创建根和索引之间的连接。您需要根内部的(ui-index index)。

如果您这样做，那么在那个(ui-index index)调用中，index将使用:initial-state设置的值。这就是为什么您还需要更新初始状态来调用comp/get-initial-state，以便您可以获得在Index的初始状态中设置的:index/id 1值。

(defsc Index [this {:index/keys [id text]}]
  {:query [:index/id :index/text]
   :ident [:index/id :index/id]
   :route-segment ["index"]
   :initial-state {:index/id 1
                   :index/text :param/text}}

  (h3 text))

(defsc Root [this {:root/keys [router index landing game settings]}]
  {:query [{:root/router (comp/get-query TopRouter)}
           {:root/index (comp/get-query Index)}
           {:root/landing (comp/get-query Landing)}
           {:root/game (comp/get-query Game)}
           {:root/settings (comp/get-query Settings)}]

   :initial-state {:root/router {}
                   :root/index {:text "Index Text"}
                   :root/landing {:text "Landing Text"}
                   :root/game {:text "Game Text"}
                   :root/settings {:text "Settings Text"}}}
  (when router
   (dom/div (ui-top-router router))))

在解决了所有这些问题之后，下面是您可能感兴趣的下一件事。

您可能并不总是想对index/id 1进行硬编码。您可能需要从服务器获取数据，以便呈现任何内容。

这就是:will-enter和“延迟路由”发挥作用的地方。请参阅下面的示例和用户界面上的文档。

(defsc Person [this {:ui/keys      [modified?]
                     :person/keys  [id name]
                     :address/keys [city state]
                     :as           props}]
  {:query               [:ui/modified? :person/id :person/name :address/city :address/state]
   :ident               :person/id
   :route-segment       ["person" :person/id]
   :route-cancelled     (fn [{:person/keys [id]}]
                          (log/info "Routing cancelled to user " id))
   :allow-route-change? (fn [this {:ui/keys [modified?]}]
                          (when modified?
                            #?(:cljs (js/alert "You cannot navigate until the user is not modified!")))
                          (not modified?))
   :will-enter          (fn [app {:person/keys [id] :as route-params}]
                          (log/info "Will enter user with route params " route-params)
                          ;; be sure to convert strings to int for this case
                          (let [id (if (string? id) (edn/read-string id) id)]
                            (dr/route-deferred [:person/id id]
                                               #(df/load app [:person/id id] Person
                                                         {:post-mutation        `dr/target-ready
                                                          :post-mutation-params {:target [:person/id id]}}))))}

Answer 2

我想你首先必须用索引组件来解决艾登的问题。

其他组件的路由工作吗？