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

问题描述

我有一个由 react-router 驱动的带有导航功能的React应用程序，该应用程序是在 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 组件嵌套了构建组件，嵌套 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（未找到）

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

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

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

我要做的就是将 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的script标签中。可能您已经在开头用点指定了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 -确定

• ./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屋！