Как подать правильную панель в рефрейме на основе URI? - PullRequest
Новая
       73

Как подать правильную панель в рефрейме на основе URI?

0 голосов
/ 06 марта 2020

У меня есть несколько панелей, определенных для моего приложения, например: 

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

Я могу использовать bidi + pushy на стороне клиента для pu sh маршрута, скажем / panel1-uri, когда происходит событие ( нажмите в этом случае) и измените панель, используя диспетчеризацию. Но когда я обращаюсь к localhost: 5000 / panel1-uri напрямую через браузер, это не работает, так как маршрут / panel1-uri не существует на сервере.

Итак, я создаю маршрут на моем сервере / panel1-uri, который просто обслуживает индекс. html и добавляю ключ панели, который я хочу показать в заголовке ответа этого маршрута. Затем я создаю привязку href к localhost: 5000 / panel1-uri вместо того, чтобы отправлять событие (в pu sh / panel1-uri), но, конечно, это по-прежнему служит панелью по умолчанию. Тем не менее, ответ, который я получил от нажатия href, содержит правильный ключ панели в заголовке. Как я могу получить доступ к этому заголовку, который я получил из ответа после нажатия href, и использовать его для изменения панели?

В качестве альтернативы, есть ли лучший способ подойти к проблеме обслуживания URI, которая не только работает с событиями в на стороне клиента, а также при вводе непосредственно в браузер?

1 Ответ

1 голос
/ 06 марта 2020

Я решил эту проблему аналогично тому, как вы это делали:

  • один маршрут /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>
...