реакции-маршрутизатор, разрешить URL-адрес за пределами корня - PullRequest
Новая
       14

реакции-маршрутизатор, разрешить URL-адрес за пределами корня

0 голосов
/ 15 сентября 2018

У меня есть приложение create-react с react-router-dom.Это работает довольно хорошо, если я начинаю с корня (то есть '/') и затем перехожу по ссылкам, определенным в Link s.Но если я пытаюсь загрузить приложение не из корневого пути, он говорит: 

Cannot GET /<path>

Как я понимаю, это должно быть установлено на стороне сервера (я работаю на обычном localhost: 9000).Или нет?В любом случае, как этого добиться практически?

Обратите внимание, это не относится к проблеме разрешения базового пути, описанной здесь: Могу ли я установить базовый маршрут в реакции-маршрутизаторе

ОБНОВЛЕНО:

Полагаю, должно быть решение, подобное использованию .htaccess.Но я все еще не могу понять, как применить его к create-react-app.Или, может быть, можно установить соответствующую опцию в webpack.config.js?

Обновление 2 .Репо здесь: https://github.com/srgg6701/react-mini

1 Ответ

0 голосов
/ 15 сентября 2018

Поскольку все ваши маршруты обрабатываются маршрутизатором, который обычно находится в пути '/' (index), вам нужно будет вернуться к своему индексу, чтобы маршрутизатор знал, куда перенаправить. Это можно сделать, установив пути на стороне вашего сервера, но я обнаружил, что этот пакет особенно полезен в этих вопросах.

Webpack

Если вы используете webpack-dev-server , вы должны знать, что он обслуживает следующее (взято из официальных документов):

Используйте веб-пакет с сервером разработки, который обеспечивает перезагрузку в реальном времени. Это следует использовать только для разработки.

Он использует webpack-dev-middleware под капотом, который обеспечивает быструю доступ в оперативную память к ресурсам веб-пакета.

...

Любой метод запустит экземпляр сервера и начнет прослушивать соединения с локального хоста через порт 8080.

Это означает, что сервер будет работать, слушая localhost. Вы можете решить эту проблему, используя предыдущий подход (кодирование на стороне сервера или промежуточное ПО), или используя опцию history api fallback : 

"scripts": {
    "start": "webpack-dev-server --history-api-fallback --config webpack.dev.config.js",
    "build": "webpack"
},

Ознакомьтесь с официальной документацией webpack для получения дополнительной информации обо всех его компонентах.

...