response-router не работает в производственной среде и при импульсном развертывании

Это происходит потому, что пользователям не предоставляется index.html, который загружает ваше приложение, когда они напрямую посещают эти URL-адреса.

Для всплеска вы можете добавить 200.html файл который содержит то же содержимое, что и index.html, который вы развертываете (или просто переименуйте его в 200.html) - затем он будет доставлен пользователям по любому URL-адресу, который они посещают, который не соответствует статическому файлу, что позволит вашему приложению начать работу.

Изменить: похоже, вы используете create-react-app. Это работает, когда вы разрабатываете локально, потому что пакет create-react-app react-scripts обрабатывает ваш index.html как запасной вариант для этих запросов.

react-scripts руководство пользователя < / a> имеет разделы на как с этим справиться при развертывании на страницах GitHub и Surge.sh (как указано выше).

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

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Эта проблема возникает во всех одностраничных приложениях (например, react, angular). Выполните следующие шаги для устранения (всего 4 всплеска):

1. npm run build
2. cd build
3. cp index.html 200.html
4. surge

При развертывании сборки на статических серверах в нашем приложении React, если бы мы использовали маршрутизаторы, которые используют HTML5 pushState history API под капотом (например, React Router с browserHistory), статические файловые серверы могли бы не загрузить маршруты и соответствующие экраны и показать вверх 404 - Not Found ошибка.

Как описано в create-react-app статье о развертывании:

когда есть новая загрузка страницы для пути, например: /todos/42, сервер ищет файл build/todos/42 и не находит его. Сервер необходимо настроить так, чтобы он отвечал на запрос к /todos/42, обслуживая index.html

Итак, чтобы маршруты работали при использовании Node с Express, можно добавить конфигурацию сервера index.js, как показано ниже:

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

// PATH CONFIGURATION TO RESPOND TO A REQUEST TO STATIC ROUTE REQUEST BY SERVING index.html
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(5000);
console.log('Server is listening on http://localhost:5000');

Если вы используете Apache HTTP Server, вам необходимо создать .htaccess файл в public папке вашего React APP, который выглядит следующим образом:

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Он будет скопирован в папку build, когда вы запустите npm run build.

У меня такая же проблема. И я решил это очень легко ... :)

Я использовал реакцию на моем интерфейсе (Create-React-App) и экспресс-бэкэнд. В режиме разработки все работает отлично, но когда я переключился на производственную сборку, в моей ответной маршрутизации возникли некоторые проблемы с маршрутизацией. После долгого опроса я обнаружил, что проблема связана с сервером, обслуживающим файл index.html.

Это должно быть после всей маршрутизации на стороне сервера, но до всех обработчиков app.post. Другими словами, следующая строка должна быть помещена после всех app.gets и перед всеми app.posts

// PRODUCTION
App.get('*', (req, res)=>{
res.sendFile(path.resolve(where, the, index.html, is))
})

У меня была такая же проблема, и я решил ее, воспользовавшись файлом .htaccess. Я добавил перенаправление, которое возвращается к index.html, оно сохраняет путь URL-адреса, и все работает отлично.

В моем .htaccess файле есть только эта строка, ErrorDocument 404 /index.html она должна находиться в корневом каталоге, создайте его, если не существует, или перезапишите существующий. Я рекомендую вам обрабатывать 404 внутри вашего приложения.

Я получил эту идею от https://medium.com/designer-recipes/how-to-make-a-custom-404-error-page-for-your-website-1af37a8b20d1

просто добавьте 200.html

внутри 200.html

<script src="path of your App.js"></script>

это работает отлично