我有一个具有导航功能的React应用程序，该应用程序react-router在开发中运行，webpack-dev- server并且启用了历史记录后备选项。这是我在我的路线中定义的路线index.js

ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRedirect to="/intro" />
      <Route path="/intro" component={Intro} />
      <Route path="/device" component={Device} />
      <Route path="/clothing" component={Clothing} />
      <Route path="/build" component={Build}>
        <IndexRedirect to="/build/pattern" />
        <Route path="/build/pattern" component={Pattern} />
        <Route path="/build/layout" component={Layout} />
        <Route path="/build/color" component={Color} />
      </Route>
      <Route path="/capture" component={Capture} />
      <Route path="/review" component={Review} />
    </Route>
  </Router>
), document.getElementById('app'))

当我浏览链接时，一切工作正常，并且可以看到嵌套的路由组件按预期嵌套在其父路由组件中。例如，当我导航到时，/build/color我可以看到我的App组件嵌套在Build该Color组件中。

失败的地方是当我尝试点击嵌套路由中的刷新按钮时。React完全无法加载，出现以下错误

GET http：// localhost：8080 / build /
app.js 404（未找到）

我的应用程序中确实没有这样的文件，但是对于为什么它会自动查找此文件而不是从根目录重新加载路由，我仍然感到困惑。请注意，在类似页面上单击刷新/device确实可以正常工作。

如果您需要有关我的设置的更多详细信息，请告诉我。谢谢！

解：

我的webpack设置实际上正在使用HtmlWebpackPlugin，它正在向我的应用程序包注入路径，如下所示

<script src="app.js" type="text/javascript"></script>

我要做的就是将我的webpack公共路径配置publicPath: '/'为如下所示，以便将捆绑包注入

<script src="/app.js" type="text/javascript"></script>