小编典典

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

reactjs

我有一个具有导航功能的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组件嵌套在BuildColor组件中。

失败的地方是当我尝试点击嵌套路由中的刷新按钮时。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>


阅读 350

收藏
2020-07-22

共1个答案

小编典典

它无法正常工作,因为它无法加载您的JavaScript包。我猜测问题出在HTML的script标签中。可能您已像这样在开头用点指定了app.js的路径
<script src="./app.js"></script>,如果为true,请删除点并检查问题是否仍然存在<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-确定
2020-07-22