reactjs - 使用 http-server 响应路由器

Question

我们将 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错误

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

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