reactjs - 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 的属性(property)目的。

文档——
BrowserRouter.md

所以在生产中它应该是:

<BrowserRouter basename="/debate">

或者更现实地:

<BrowserRouter basename={ROUTE_BASENAME}>

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