React роутер с http-сервером
мы используем react-roucter-dom с http-server, когда пользователь загружает главную страницу и нажимает навигационные ссылки, новые страницы загружаются отлично, но когда пользователь обновляет страницу на этом маршруте, он возвращает 404.
Это означает, что HTML5 pushState не работает с http-server.
пример :
<Router>
<Route exact path = "/" component = {Home} />
<Route path = "/about" component = {About} />
<Route path = "/topics" component = {Topics} />
</Router>
Если пользователь перейдет на страницу /about и обновит ее, произойдет ошибка 404.
Есть ли способ исправить эту проблему?
Ответы 4
Ваша ошибка возникает, поскольку ваше приложение является одностраничным приложением, что означает, что все данные вашего сайта загружаются по маршруту /. Это означает, что если вы попытаетесь получить доступ к любой другой странице без предварительной загрузки сайта через маршрут /, это не удастся.
У Тайлера МакГинниса есть очень хороший Сообщение блога о различных способах решения этой проблемы.
Ваша проблема связана с тем, что ваш реактивный пакет недоступен на каких-либо маршрутах, кроме маршрута /. Вам нужно настроить свой сервер для обслуживания '/' в качестве резервного маршрута.
Вам следует использовать другие пакеты с поддержкой API истории HTML5, такие как Сервер, вместо http-server.
Хотя Servør определенно может быть решением, поскольку по умолчанию он возвращается к index.html и лучше, чем http-server, но «API истории HTML5» здесь не причина.
Используйте это при запуске http-сервера:
http-server --proxy http://localhost:8080? ./build
Он перенаправляет любые запросы об ошибках, которые он не может обработать, в index.html, где находится ваша конфигурация реактивного маршрутизатора. Если все запросы приходят на эту страницу, то внутренне маршрутизацией занимается react-router.
Кстати, я встроил в package.json небольшой скрипт — scripts, чтобы все это вызывать и обслуживать папку сборки вот так:
scripts: {
...
"serveprod": "npm run build && http-server --proxy http://localhost:8080? ./build"
...
}
И просто запустите:
npm run serveprod
Совет:: Для приложения create-реагировать вы должны либо указать homepage в package.json, либо соответствующим образом установить переменную .env: PUBLIC_URL=http://localhost:8080 yarn build && http-server --proxy http://localhost:8080? ./build
Какова мотивация знака вопроса в конце? Мне пришлось удалить его, чтобы заставить его работать...
@ bluenote10 команда взята из документации http-server, github.com/http-party/http-server#catch-all-перенаправление
У меня была такая же проблема в моем проекте React + Webpack. Я нашел решение на документы приложения «создать-реагировать».
Вы должны:
- в проекте React запустить
npm i --save express(ссылка на сайт) - создать новый файл в корневом каталоге проекта (например,
server.js) - пишем туда код http сервера, который в каждой конечной точке возвращает
index.html:
// libs
const express = require("express");
const path = require("path");
// create server
const app = express();
const PORT = 3000;
const BUILD_FOLDER = "public";
app.use(express.static(path.join(__dirname, BUILD_FOLDER)));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, BUILD_FOLDER, "index.html"));
});
app.listen(PORT);- Запустите сервер с
node server.js(живая консоль) илиnode server.js 1>server.log 2>server-error.log &(фоновый процесс, который вы можете найти позже сps uax | grep node)
Я знаю, что этот пост старый, но, возможно, кто-то найдет это полезным.
Мой вопрос о
http-serverсreact-router