0

我为我的应用程序定义了几个面板，如下所示：

(defmulti panels identity)
(defmethod panels :panel1 [] [panel1])
(defmethod panels :panel2 [] [panel2])
(defmethod panels :panel3 [] [panel3])

我可以在客户端使用 bidi+pushy 推送路由，例如 /panel1-uri 当事件（在本例中为单击）发生时，并使用调度更改面板。但是当我直接通过浏览器访问 localhost:5000/panel1-uri 时，这不起作用，因为 /panel1-uri 路由在服务器中不存在。

所以我在我的服务器 /panel1-uri 中创建了一个路由，它只为 index.html 提供服务，并在该路由响应的标题中添加我想要显示的面板的键。然后我为 localhost:5000/panel1-uri 创建一个锚点 href，而不是调度一个事件（推送 /panel1-uri），但是当然，这仍然为默认面板提供服务。但是，我通过单击 href 收到的响应确实在其标题中包含正确的面板键。单击 href 后如何访问从响应中收到的此标头并使用它来更改面板？

或者，是否有更好的方法来解决服务 uri 的问题，不仅可以处理客户端中的事件，还可以直接输入到浏览器中？

4

1 回答 1

1

我以与您类似的方式解决了这个问题：

  • /pannel-1 => index.html服务器端的一条路由，
  • 使用 pushy 来利用 HTML5 历史。

您不需要在 HTTP 响应标头中将数据传回客户端。诀窍是 Pushy 将在启动时触发，因此您只需要等待页面加载即可调用pushy/start!. 换句话说，首先挂载你的 React 应用程序，然后启动路由器。

这是我的一些代码：

(ns my.router
  (:require [pushy.core :as pushy]))

;; We need to call `pushy/start!` as the last action in the boot process or it
;; might produce unexpected behavior. Pushy uses goog.history, and the goog
;; history need to be loaded before the app starts and before the document has
;; finished loading, but triggering the routing mechanism need to be done once
;; the world is set up.
;; @see https://google.github.io/closure-library/api/goog.History.html
(defn start! []
  (pushy/start! history))

在您的核心命名空间中：

(ns your.app.core
  (:require [your.app.router :as router]))

(defn ^:export boot! []
  (do-stuff-to-set-up-your-app-state)
  (mount-your-react-app)
  (router/start!))

在你的index.html：

<script … src="app.js"></script>
<script type="text/javascript">
  your.app.core.boot_BANG_();
</script>
于 2020-03-06T16:37:58.347 回答