React Reloading Page не работает на сервере, но работает на localhost

Question

Я искал ответы на эту проблему, но пока не нашел решения.Может быть, это просто потому, что я не понимаю другие ответы, приведенные здесь на stackoverflow

Моя ситуация: у меня есть приложение React, работающее с React Router v4.Мое приложение работает под http://localhost:3000/myApp и для производства под http://myserver/myApp

Моя проблема: всякий раз, когда я обновляю страницу на локальном хосте, все работает нормально.Я могу скопировать вставки URL без каких-либо проблем, все ведет себя отлично.Когда я делаю это на сервере, я получаю сообщение об ошибке «Не найдено» ...

Что я думаю / что я пробовал до сих пор: я думаю, что я не до конца понимаю разницу между клиентской исерверная маршрутизация.Я думал, что так и есть, но почему-то мне не имеет смысла, что он работает на локальном хосте, а не на сервере.

Так что на самом деле я не уверен, что проблема в клиенте / сервереили если это потому, что мое приложение не работает в корневом каталоге./ MyApp на локальном хосте просто делается путем добавления <BrowserRouter basename='/console'> Может ли это быть проблемой?Что сервер не может правильно это интерпретировать?Поскольку сервер является сервером Apache с множеством конфигов, я не очень понимаю (это бизнес-сервер, на котором размещены другие приложения ....).

Я действительно думаю, что проблема в том, что яеще не реализовал маршрутизацию на стороне сервера ... но почему он работает на моем локальном хосте?Разработал ли серверный пакет webpack это за кулисами?

Я был бы очень благодарен, если бы кто-нибудь мог помочь мне здесь.Если вам нужна дополнительная информация, не стесняйтесь спрашивать:)

Большое спасибо

Answer 1

вам нужен сервер, который обрабатывает перенаправления для истории браузера API.в режиме разработки webpack-dev-server сделает это за вас, но при его развертывании вам необходимо одинаково настроить ваш веб-сервер.

например, в apache, перенаправить на индекс, если запрос не соответствует файлу через .htaccess:

Options +FollowSymLinks
IndexIgnore */*
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.html

, например, в экспрессе вы можете использовать промежуточное ПО, например https://www.npmjs.com/package/express-history-api-fallback для перенаправления.

Пример nginx

# Default server configuration
server {
  listen 80 default_server;
  server_name myserver.me;
  root /var/www/app;
  # Routes without file extension e.g. /user/1
  location / {
    try_files $uri /index.html;
  }
  # 404 if a file is requested (so the main app isn't served)
  location ~ ^.+\..+$ {
    try_files $uri =404;
  }
}

и т. Д. И т. Д.