如何在ClojureScript / Reagent中动态更改页面标题和描述

Question

有没有一种简单的方法可以从ClojureScript Reagent应用程序更改文档标题和描述（或其他[:html [:head [:meta标记）？例如，在每个路由匹配时，将标题和描述更改为匹配新页面内容。

最好不要使用js/window，这样相同的代码既可以在浏览器中使用，也可以在服务器等离子体预渲染中使用（这是我需要的SEO）。

在JavaScript / React世界中，有react-document-meta和react-side-effect，可能可以转换为Reagent组件。但是，这种处理副作用的方式似乎像是一个hack，可能可以用纯ClojureScript实现更简单的解决方案。

- Vasek

---

我找到了一个相关的问题，尝试使用 npm react-helmet 模块的导入来解决同样的问题。但是编译失败，目前还没有找到有效的答案：https://stackoverflow.com/questions/47272447/reagent-adapt-react-class-fails-with-optimizations-advanced - Vasek

Answer 1

我没有使用，而是使用类似的双向路由器silk与re-frame一起。每次页面更改时，我们会触发一个:set-current-route事件，该事件将在中央处理。

:set-current-route的处理程序将会

(set! (.-title js/document) "dynamic title")

- Alain M. Lafon

---

这在浏览器中可以工作。但是当编译为 :target :nodejs 并在 node 或其他非浏览器环境上运行时，它会失败，因为 js/document 不可用。因此，它不能解决问题的 SEO 和同构部分。 - Vasek

Answer 2

我也没有使用bidi，但是这里是我为在reagent中使用reitit更新HTML文档标题所想出的解决方案。我从我的主路由包装组件的:component-did-update中调用此函数：

(defn update-html-title! []
  (set! (.-title js/document)
        (->> (.. js/window -location -pathname)
             (rf/match-by-path router)
             :data
             :title)))

- trailing slash