使用 http-server 反应路由器

Question

我们将 react-roucter-dom 与 http-server 结合使用，当用户加载主页面并单击导航链接时，新页面将完美加载，但是当用户在该路径中刷新页面时，它 returns 404。这意味着 HTML5 pushState 不适用于 http-server.

示例：

<Router>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/topics" component={Topics} />
</Router>

如果用户转到 /about 页面并刷新它，将发生 404 错误

有办法解决这个问题吗？

Answer 1

您的错误发生是因为您的应用程序是单页应用程序，这意味着您的整个站点数据都在 / 路由上加载。这意味着如果您尝试访问任何其他页面而不首先通过 / 路由加载站点，那么它将失败。

Tyler McGinnis 对解决此问题的各种方法有很好的Blog Post。

Answer 2

您应该使用其他支持 HTML5 历史 API 的软件包，例如 Servør 而不是 http-server。

Answer 3

当你运行 http-server :

时使用这个

http-server --proxy http://localhost:8080? ./build

它将无法处理的任何错误请求重定向到 index.html 您的 react-router 配置所在的位置。如果所有请求都到达此页面，则 react-router 会在内部负责路由。

顺便说一下，我在 package.json - scripts 中构建了一个小脚本，用于调用所有这些并像这样为构建文件夹提供服务：

scripts: {
           ...
           "serveprod": "npm run build && http-server --proxy http://localhost:8080? ./build"
           ...
       }

还有运行 :

 npm run serveprod

Answer 4

我在 React + Webpack 项目中遇到了同样的问题。我在 create-react-app docs.

上找到了解决方案

你必须：

在 React 项目中运行 npm i --save express (link)
在项目根目录中创建新文件(f.e。server.js)
在那里写 http 服务器代码，在每个端点 returns 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 找到的后台进程）启动服务器

我知道这个 post 很旧，但也许有人会觉得有用。

Answer 5

我认为我们还需要另一个参数来运行我们正确构建应用程序。这里我使用了这个

http-server -P https://localhost:8080/? --proxy-options.secure false -S -C yourpemfile.pem -K yourkeyfile.pem build/

这里 --proxy-options 基本上将 secure true 设置为默认值，为此当运行我们的命令无法呈现我们的反应应用程序的构建文件时

使用 http-server 反应路由器

React router with http-server

httpserver

reactjs

react-router