Отладка Browserify + WebStorm: маршрутизация в React-Router v4 BrowserRouter
Я пишу одностраничное приложение с React для образовательных целей. Мой React-Router v4 BrowserRouter правильно обрабатывает маршрутизацию на стороне клиента в CodeSandbox, но не локально. В этом случае локальный сервер является встроенным в веб-шторм devserver. HashRouter работает локально, а BrowserRouter - нет.
Правильное функционирование: https://codesandbox.io/s/j71nwp9469
2 ответа
Решение состояло в том, чтобы понять, как работает push-маршрутизация и API истории. При обслуживании одностраничных приложений, использующих API истории HTML5, необходимо прокси-запросы через страницу индекса.
От сервера Webstorm dev эта функция не ожидается, поэтому упоминание о Webstorm в этой теме было ошибкой.
Есть несколько библиотек < 20 строк, которые делают это для нас, или это может быть легко закодировано вручную.
Вы, вероятно, обслуживаете свое приложение на встроенном веб-сервере (localhost:63342), право? Внутренний веб-сервер возвращает 404 при использовании "абсолютных" URL-адресов (начинающихся с косой черты), поскольку он обслуживает файлы из localhost:port/project_name а не из localhost:port, Вот почему вы должны обязательно изменить все URL-адреса с абсолютных на относительные.
Невозможно настроить внутренний веб-сервер для использования корневого каталога проекта в качестве корневого документа сервера. Но вы можете настроить его для использования URL-адресов, таких как http://<host name>:<port> где "имя хоста" - это имя, указанное в файле hosts, например 127.0.0.1 myhostName, См. https://youtrack.jetbrains.com/issue/WEB-8988.