Как заставить работу маршрутизатора работать со статическими активами, html5 режиме, API истории и вложенными маршрутами?

Мне казалось, что я начинаю понимать React Router, но я ударил новую стену, добавляя библиотеку, которая загружает css для своих компонентов. Все работает отлично, когда перемещается из моего дома, на страницу, содержащую компонент, но когда я его обновляю, URL-адреса шрифтов сломаны...

Я нашел здесь указатель и здесь, но пока не повезло. Это распространенная проблема? Как обойти это?

Я использую сервер webpack dev с конфигурацией по умолчанию, созданной yoman scaffolder.

Библиотека, которую я использую, React Fa для отображения значков.

Когда я загружаю свое приложение на http://localhost:8000/, все отображается нормально, затем я перехожу к http://localhost:8000/customer/ABCD1234/chat, и мои значки в порядке. Шрифт был загружен должным образом.

Затем я обновляю страницу, и я вижу в консоли:

DOMLazyTree.js? 019b: 56 GET http://localhost:8000/customer/ABCD1234/assets/926c93d201fe51c8f351e858468980c3.woff2

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

Вот мой маршрутизатор:

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path='/' component={App}>
      <IndexRoute component={Index}/>
      <Route path='customer/:id'        component={Customer}    />
      <Route path='customer/:id/chat'   component={CustomerChat}/>
      <Route path="*"                   component={ NotFound }  />
    </Route>
  </Router>
, document.getElementById('support-app'));

Я также попытался добавить <base href="/"/> в свой index.html, но я получаю красивое предупреждение в красном на консоли, поэтому, возможно, не лучшая идея:

Предупреждение. Автоматическая установка базового имени с помощью устарел и будет удален в следующем крупном выпуске. семантика тонко отличается от базового. пожалуйста передайте базовое имя явно в параметрах createHistory

Ответы

Ответ 1

Похоже, вы определили относительные пути к вашим активам и значкам в вашем CSS.

background-image: url('assets/image/myicon.png')

попробуйте абсолютный путь:

background-image: url('/assets/image/myicon.png')

Поскольку приложения React - одностраничные приложения, и вы вводите свое приложение на /, все URL-адреса будут работать нормально, независимо от того, на какую страницу вы переходите, поскольку они относятся к корню, в котором вы начали.

Но как только вы перезагрузите страницу на другом пути, например /customer/ABCD, все ваши активы будут относиться к этому, следовательно, неправильный URL-адрес, который вы видите на своей консоли.

Кроме того, если вы используете webpack, вы можете попробовать установить publicPath в свой конфигурационный файл следующим образом:

...
output: {
    path: 'assets',
    publicPath: '/'
},
...

Ответ 2

У меня такая же проблема.

  • Добавьте тег <base href="#" onclick="location.href='http://whatever'; return false;"> в начало страницы, содержащей HTML-адрес-маршрутизатор с использованием браузера по умолчанию

  • Загрузите страницу - history.js выведет 2 ошибки. Предупреждение. Автоматическая установка basename с помощью <base href> устарела и будет удалена в следующей крупной версии. Семантика тонко отличается от базового. Пожалуйста, передайте базовое имя явно в параметрах createHistory

  • Измените историю взаимодействия с маршрутизатором, чтобы использовать историю, в которой история const history = useRouterHistory(createHistory)({ basename: 'http://whatever' }), которая должна устранить проблему (поскольку базовое имя теперь явно передано)

  • Обновить страницу

https://github.com/reactjs/react-router/issues/3387

Обновление 5/9

В моем случае.

index.html

<head>
  <base href="/" />
  <script src="app.js"></script>
</head>
<body>
  <div id="app">
  </div>
</body>

app.js

import { Router , useRouterHistory } from 'react-router'
import { createHistory } from 'history'

const browserHistory = useRouterHistory(createHistory)({ basename: '/' })

render(
  <Router routes={routes} history={browserHistory}/>,
  document.getElementById("app")
);

И затем перезагрузите предупреждение, чтобы исчезнуть. надеюсь, это полезно.