React Router V4 但在 package.json 中的不同主页上...修复 404 未找到？

Question

包.json

"name": "debate",
"homepage": "/debate", // I THINK THIS IS THE PROBLEM
"version": "0.1.0",
"private": true,
"dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.1.1"
}

应用程序.js

<BrowserRouter>
    <div>
        <Route path='/thread/:pathParam?' component={Thread}/>
        <Route path='/post' component={Post}/>
    </div>
</BrowserRouter>

当我在... [ http://localhost:3000/thread ]上测试应用程序时，一切正常。

当我构建用于生产的应用程序并将我的文件上传到我的服务器时，目录 [ http://www.example.com/debate/thread ] 给出了 404 错误，指出“请求的 URL /debate/thread/ 未在这个服务器。”

The requested URL /debate/thread/ was not found on this server.

[ http://www.example.com/debate/ ] 仍然运行良好。

我不知道如何让 react-router-dom 认识到我们实际上是在一个子目录中......

Answer 1

您需要使用对象的basename属性BrowserRouter。

文档 — BrowserRouter.md

所以在生产中应该是：

<BrowserRouter basename="/debate">

或者更现实地：

<BrowserRouter basename={ROUTE_BASENAME}>

这ROUTE_BASENAME应该解析为/本地和/debate服务器上。您可以使用Webpack DefinePlugin来处理这种变量。