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

Question

我有一个由 react-router 提供导航支持的 React 应用程序，我运行正在开发 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，它注入了我的应用程序包的路径，如下

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

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

<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 加载脚本 - OK

Answer 2

@niba的回答完美解决了我的问题。我一直遇到的问题是，当我将 <Route/> 元素嵌套在已由 <Route/> 呈现的组件中时，它将无法加载脚本 bundle.js 当我尝试去到子路线 url。在webpackConfig.json中添加以下内容后，一切恢复正常

module.exports = {
    ...
    output: {
        path: path.resolve('dist'),
        publicPath: '/',
        filename: 'bundle.js'
    },
    ...
}

Answer 3

对于那些尝试过上述方法但仍然有问题的人，我在我的 webpack 配置中使用了 html-webpack-plugin，所以它不需要将包注入 HTML在 index.html

上添加任何脚本导入

所以我从我的index.html文件中删除了以下行：

<script src="/bundle.js"></script>

并在 webpack 插件部分添加了以下配置：

// some other imports 
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
...
webpack default config
...

plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      hash: true,
      inject: true,
    }),
    ...
    other plugins,
  ],

}

记住也要根据你的项目使用输出配置，比如我的：

output: {
    path: path.resolve(__dirname, 'public'),
    publicPath: '/',
    filename: 'bundle.js',
  },

Answer 4

在package.json文件中，设置

    "homepage": "/"

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

React nested route fails to load on refresh

routing

http-status-code-404

reactjs

react-router

webpack-dev-server