Управление маршрутами в приложении responsejs в производстве

Question

Как обрабатывается маршрутизация во встроенном приложении реакции?

В частности, в среде разработки мы можем просто нажать <host>:<port>/<some-path> и соответствующий компонент загружается, но как только приложение построено , мы получаем набор статических файлов и один index.html файл, который затем обслуживается некоторым сервером. Теперь, после нажатия на URL <server-host>:<server-port>, приложение работает как задумано, но после ввода пути, скажем, <server-host>:<server-port>/<component-path>, возвращается 404 ошибка . Если есть, скажем, кнопка, при нажатии которой будет перенаправлен тот же самый /<component-path>, приложение работает, но затем при обновлении этой страницы снова возникает ошибка 404 .

Как это можно решить? Как правильно обслуживать такие приложения, имеющие много компонентов на разных маршрутах?

Answer 1

подход 1: (рекомендуется)

В server config вы должны point все URL (http://ipaddress:port/<* any url pattern>) до index.html реагирующего приложения. это известно как fallback-mechanism.

И когда поступит любой запрос, index.html приложения React позаботится об этом автоматически, потому что это одностраничное приложение.

подхода 2:

Использование HashRouter в приложении React. Так что Вам не нужно ничего настраивать.

Answer 2

В зависимости от того, на каком сервере вы развертываете, вы должны перенаправить все ошибки в index.html, искать конфигурацию, например, htaccess или, например, если это AWS S3, вы просто указываете страницу ошибок в тот же файл index.html. это подано. Затем вы обрабатываете фактическую ошибку в своем коде, используя библиотеку маршрутизации, как, например, response-router-dom, чтобы позаботиться о реальной ошибке. Ваша ошибка связана с тем, что в обычных условиях на статическом хосте, когда вы предоставляете URL-адрес, такой как <server-port>/<component-path>, сервер предполагает, что в вашем корневом каталоге есть папка с именем component-path, в которой есть индексный файл, из которого можно загрузить ино в случае одностраничного приложения React все управляется index.html. Таким образом, каждый запрос должен пройти через index.html