reactjs - React 嵌套路由刷新时无法加载

Question

我有一个 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 (Not Found)

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

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

<小时/>

解决方案:

我的webpack安装程序实际上使用 HtmlWebpackPlugin它将路径注入(inject)到我的应用程序包中，如下所示

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

我所需要做的就是配置我的 webpack公共(public)路径为 publicPath: '/'这样 bundle 将按如下方式注入(inject)

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

Answer 1

它不起作用，因为它无法加载您的 javascript 包。我猜测问题出在 HTML 脚本标记中的路径。可能您已经指定了以点开头的 app.js 路径，如下所示 <script src="./app.js"></script> ，如果这是真的，请删除点并检查问题是否仍然存在 <script src="/app.js"></script>

让我们说明一下 ./app.js 之间的区别和/app.js

情况 1. 您正在使用第一级路由加载页面，例如 /或/intro

• ./app.js : HTML 尝试从 http://address/app.js 加载脚本
• /app.js : HTML 尝试从 http://address/app.js 加载脚本

没有区别

案例2.您正在使用二级路由/build/pattern加载页面

• ./app.js : HTML 尝试从 http://address/build/app.js 加载脚本- 不存在
• /app.js : HTML 尝试从 http://address/app.js 加载脚本- 好的