反应路由器V4,但在package.json中的另一个主页上...修复404未找到?

时间:2017-07-07 21:52:19

标签: reactjs react-router

的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知道我们实际上是在一个子目录上......

1 个答案:

答案 0 :(得分:2)

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

文件 - BrowserRouter.md

所以在制作中它应该是:

<BrowserRouter basename="/debate">

或更现实地说:

<BrowserRouter basename={ROUTE_BASENAME}>

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