尝试使用 react-router-dom 在 clojurescript 中创建 mutlipage 应用程序

Question

我正在尝试使用 clojurescript 创建多页应用程序。对于反应的东西，我正在使用 helix 库。对于重新加载，我使用的是 shadow-cljs。

当尝试像 javascript 那样使用 react-router-dom 时，它不起作用。

这是我的代码：

(ns app.core
  (:require [app.components.home :refer [home]]
            [app.components.about :refer [about]]
            [helix.core :refer [defnc $]]
            [helix.dom :as d]
            ["react-dom" :as rdom]
            ["react-router-dom" :refer [BrowserRouter, Route, Switch]]))

(defnc app []
  (BrowserRouter
    (d/div
      (d/nav
        (d/h1 "Title")
        (d/div
          (d/a {:href "/"} "Home")
          (d/a {:href "/about"} "About")
      (Switch
        (Route {:path "/"} ($ home))
        (Route {:path "/about"} ($ about))))))

(defn ^:export run []
  (rdom/render ($ app) (js/document.getElementById "root")))

当运行本地代码时，我得到以下错误：

react-dom.development.js:13232 Uncaught Error: Objects are not valid as a React child (found: object with keys {MemoryRouter, Prompt, Redirect, Route, Router, StaticRouter, Switch, generatePath, matchPath, useHistory, useLocation, useParams, useRouteMatch, withRouter, BrowserRouter, HashRouter, Link, NavLink, props, context, refs, updater, history}). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectType (react-dom.development.js:13232)
    at eval (react-dom.development.js:14134)
    at reconcileChildren (react-dom.development.js:16991)
    at beginWork (react-dom.development.js:17891)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3946)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:3995)
    at invokeGuardedCallback (react-dom.development.js:4057)
    at beginWork (react-dom.development.js:23965)
    at performUnitOfWork (react-dom.development.js:22777)
    at workLoopSync (react-dom.development.js:22708)

Answer 1

我设法解决了这个问题：因为 BrowserRouter、Route 和 Switch 不是有效的 React 组件，所以必须使用 $ 宏插入它们：

(defnc app []
  ($ BrowserRouter
    (d/div
      (d/nav
        (d/h1 "Title")
        (d/div
          (d/a {:href "/"} "Home")
          (d/a {:href "/about"} "About")
      ($ Switch
        ($ Route {:path "/"} ($ home))
        ($ Route {:path "/about"} ($ about))))))

尝试使用 react-router-dom 在 clojurescript 中创建 mutlipage 应用程序

Trying to use react-router-dom to create mutlipage application in clojurescript

clojurescript

react-router-dom