的package.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"
}
App.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错误,说明&#34;在此服务器上找不到请求的URL /辩论/线程/ &#34;
The requested URL /debate/thread/ was not found on this server.
[http://www.example.com/debate/]仍能很好地运作。
我不确定怎么让react-router-dom知道我们实际上是在一个子目录上......
答案 0 :(得分:2)
您需要使用basename
对象的BrowserRouter
属性。
文件 - BrowserRouter.md
所以在制作中它应该是:
<BrowserRouter basename="/debate">
或更现实地说:
<BrowserRouter basename={ROUTE_BASENAME}>
ROUTE_BASENAME
应解析为/
本地和服务器上的/debate
。您可以使用Webpack DefinePlugin来处理这类变量。