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完全无法加载，我收到以下错误

获取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>

Answer 1

它无法正常工作，因为它无法加载您的javascript包。我猜测问题出在HTML中的脚本标记中。可能你已经像这样在开头用dot指定了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加载脚本 - 确定

Answer 2

对于尝试了上述方法和stil的用户来说，我在我的webpack配置上使用了html-webpack-plugin，因此它无需在index.html上添加任何脚本导入即可将捆绑软件注入HTML内。 / p>

所以我从我的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 3

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

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

Answer 4

在package.json文件中，只需设置

    "homepage": "/"

React嵌套路由无法在刷新

4 个答案: