Полимерные/веб-компоненты ‹приложение-маршрутизатор› не может получить/‹маршрут›

Я использую Polymer для приложения и app-router Эрика Рингсмута для маршрутизации. Код выглядит следующим образом:

В index.html:

<app-router mode="pushstate">
  <app-route path="/" import="/elements/login-page/login-page.html"></app-route>
  <app-route path="/dash" import="/elements/dash-page/dash-page.html"></app-route>
  <app-route path="/new" import="/elements/newapp-page/newapp-page.html"></app-route>
  <app-route path="*" import="/elements/dash-page/dash-page.html"></app-route>
</app-router>

В логин-page.html:

<link rel="import" href="../../../bower_components/polymer/polymer.html">

<polymer-element name="login-page" attributes="">
  <template>
    <link rel="stylesheet" href="login-page.css">
    <section vertical layout center-center>
      <h1>Login with:</h1>
      <fire-login provider="github"></fire-login>
      <fire-login provider="facebook"></fire-login>
    </section>
  </template>
</polymer-element>

Остальные страницы аналогичны. Все работает нормально из коробки, но когда я обновляю любую из страниц, я получаю Cannot GET /dash или Cannot GET /new. Возврат к корневому пути и обновление снова заставят все работать.

Я не могу понять, почему обновление не работает.


web-component polymer routing
person Evan Caldwell    schedule 17.03.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы ожидаете от этого компонента больше волшебства, чем он может дать :)

Запросы идут на HTTP-сервер, а не напрямую на компонент <app-router>. Вы используете HTML5 pushState способ обработки маршрутов. Тем не менее, когда вы указываете /new в качестве нового пути, компонент показывает желаемый импорт и заменяет location.href на http://youserver/new. С другой стороны, когда вы нажимаете F5, браузер перенаправляется на http://youserver/new. Звучит как разные действия, не так ли?

Итак, запрос к http://youserver/new обрабатывается вашим веб-сервером и поскольку такой страницы нет, вы получаете 404.

Здесь у вас есть два варианта:

  • научите свой HTTP-сервер обрабатывать /new как your_router_page.html с mod_rewrite и т.п.;
  • укажите правильный путь в <app-route>s.

Компонентный способ (ИМХО) заключается в указании правильного пути:

<app-route path="/my-router.html?/dash"></app-route>

Или, что еще лучше, зацикливайтесь на хэш-навигации, поскольку она работает «из коробки» и вообще не требует специальной обработки маршрута. pushState больше похоже на обработку перенаправлений за пределы обработчика текущего компонента.

Надеюсь, поможет.

person Aleksei Matiushkin    schedule 17.03.2015
comment
В итоге я переключился на хеш-адреса, и это сработало отлично. Огромное спасибо. - person Evan Caldwell; 18.03.2015