如何用Hyperfiddle Electric通过URL查询参数在页面间传递输入？

1. 输入页面：收集输入并带参数跳转 #

Electric基于Hyperfiddle的客户端路由体系，可通过hyperfiddle.history/navigate!手动触发跳转并拼接查询参数：

(ns app.input-page
  (:require [hyperfiddle.electric :as e]
            [hyperfiddle.history :as h]))

(e/defn InputPage []
  (e/client
    (let [!input (atom "")
          input (e/watch !input)]
      (input {:type "text" :value input :on-change #(reset! !input (.. % -target -value))})
      (button {:on-click #(h/navigate! "/result" (js/URLSearchParams. #js {"content" input}))}
        "提交并跳转"))))

2. 结果页面：读取查询参数并显示 #

利用hyperfiddle.history/location监听当前URL变化，自动解析查询参数并渲染内容：

(ns app.result-page
  (:require [hyperfiddle.electric :as e]
            [hyperfiddle.history :as h]))

(e/defn ResultPage []
  (e/client
    (let [location (h/location)
          params (some-> location .-search js/URLSearchParams. (.get "content"))]
      (if params
        (div "你输入的内容是：" (str params))
        (div "未获取到输入内容")))))

3. 根组件配置路由 #

将路径与对应页面组件关联，完成客户端路由映射：

(ns app.root
  (:require [hyperfiddle.electric :as e]
            [hyperfiddle.history :as h]
            [app.input-page :as input]
            [app.result-page :as result]))

(e/defn Root []
  (e/client
    (h/history
      (case (h/path)
        "/" (input/InputPage.)
        "/result" (result/ResultPage.)
        (div "404 页面不存在")))))

关键补充 #

• Ring/Compojure不适用的原因：Electric是客户端驱动的反应式框架，路由逻辑运行在浏览器侧；而Ring/Compojure是服务端路由，负责处理HTTP请求，二者体系不兼容。
• 若想用hyperfiddle.history/link组件，可直接构造带参数的href（注意编码特殊字符）：

  (h/link {:href (str "/result?content=" (js/encodeURIComponent input))} "跳转")
  

内容的提问来源于stack exchange，提问作者Huseyin Yavas