刷新页面时 BrowserRouter 显示错误 |反应路由器-v4答案

【问题标题】：BrowserRouter shows Error when Page is refreshed | React-router-v4刷新页面时 BrowserRouter 显示错误 |反应路由器-v4
【发布时间】：2017-11-03 09:50:16
【问题描述】：

使用HashRouter，路由在所有情况下都能正常工作，但是当使用BrowserRouter时，页面刷新时会显示错误。

这是我包裹在 HashRouter 和 BrowserRouter 下的 Route 的代码：

        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/trip-detail" component={TripDetail} />
          <Route exact path="/booking" component={TripBooking} />
          <Redirect to="/" />
        </Switch>

这是我刷新时得到的屏幕截图：

【问题讨论】：

在本地？您如何托管您的应用程序？
是的，我正在本地开发环境中进行测试，我使用 firebase 进行托管
你能把你的 index.js 文件贴在你要导入 BrowserRouter 的地方吗，你是否将任何历史记录传递给 BrowserRouter？
你可以使用webpack-dev-server和historyApiFallback
@Aaqib 不，我没有将历史记录传递给 BrowserRouter，但是在调试时我发现组件正在接收历史记录和其他相关道具（位置等）

标签： javascript reactjs react-router-v4 react-router-dom

【解决方案1】：

更新

感谢@GabrielBleu，您的解决方案非常有效。造成此错误的不是反应路由器。这是我的 webpack(server) 配置，无法获取到我的组件的路由。

我在 webpack 配置中唯一更新的是添加此代码

  devServer: {
    historyApiFallback: {
      index: '/',
    },
  },

【讨论】：