使用 http-server 响应路由器

Question

我们使用react-roucter-domwith http-server，当用户加载主页面并点击导航链接时，新页面将完美加载，但是当用户在该路由中刷新页面时，它返回404。这意味着 HTML5pushState不适用于http-server.

例子 ：

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

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

有没有办法解决这个问题？

Answer 1

运行 http-server 时使用它：

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

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

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

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

只需运行：

 npm run serveprod