React 嵌套路由无法在刷新时加载 [英] React nested route fails to load on refresh

问题描述

我有一个 React 应用程序，其导航由 react-router 提供支持，我在开发中使用 webpack-dev-server 运行并启用了历史回退选项.这是我在 index.js

I have a React app with navigation powered by react-router that I run in development with webpack-dev-server and the history fallback option enabled. Here is the routes I have defined in my 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> 组件.

When I navigate through links, everything works fine and I can see the nested route components nesting within their parent route components as expected. For example when I navigate to /build/color I can see my App component nesting the Build component nesting the Color component.

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

Where it fails is when I try to hit the refresh button within the nested route. React entirely fails to load and I get the following error

GET http://localhost:8080/build/app.js 404(未找到))

GET http://localhost:8080/build/app.js 404 (Not Found)

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

There is indeed not such a file in my app but I am still confused as of why it is automatically looking for this file instead of reloading the route from the root. Note that hitting refresh on pages like /device does work without an issue.

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

Let me know if you need more details about my setup. Thanks!

解决方案:

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

My webpack setup is actually using HtmlWebpackPlugin which was injecting the path to my app bundle as follows

我需要做的就是将我的 webpack 公共路径配置为 publicPath: '/' 以便包将按如下方式注入

All I needed to do was to configure my webpack public path as publicPath: '/' so that the bundle would be injected as follows

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

推荐答案

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

It doesn't work because it can't load your javascript bundle. I'm guessing that the problem is with your path in script tag in HTML. Probably you have specified the path to app.js with dot at the beginning like this one <script src="./app.js"></script>, if this is true please remove dot and check if the problem still exists <script src="/app.js"></script>

我们来说明一下./app.js和/app.js

案例 1. 您正在使用诸如 / 或 /intro

Case 1. You are loading page using first level of routes like / or /intro

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

• ./app.js: HTML tries to load script from http://address/app.js
• /app.js: HTML tries to load script from http://address/app.js

没有区别

案例 2. 您正在使用第二级路由 /build/pattern

Case 2. You are loading page using second level of routes /build/pattern

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

• ./app.js: HTML tries to load script from http://address/build/app.js - doesn't exist
• /app.js: HTML tries to load script from http://address/app.js - OK

这篇关于React 嵌套路由无法在刷新时加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！