具有/ list /：page之类的路径的路由器在重新加载时不起作用

Question

我有多个这样的路由设置：

<Route path="/" exact={true} component={test0} />
<Route path="/test1" exact={true} component={test1} />
<Route path="/test2" exact={true} component={test2} />
<Route path="/test3/options" exact={true} component={test3} />
<Route path="/test4/data/:id" exact={true} component={test4} />
<Route path="/list/:page" exact={true} component={list} />

当我们单击链接时，正常路由正在工作。

但是当我手动重新加载浏览器页面时，它仅适用于路径：/，/ test1和/ test2

页面重新加载不适用于路径/ test3 / options，/ test4 / data /：id（例如：/ test4 / data / 4）和/ list /：page（例如：/ list / 3）

我的开发服务器配置为：

devServer: {
  liveReload: true,
  stats: "errors-only",
  hot: true,
  historyApiFallback: true
}

已安装React Router和React Router DOM版本

"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",

感谢您的任何帮助。

更新：

此错误显示在所有无法使用“重新加载”的路径上。bundle.min.js文件的实际路径应为http://localhost:8080/bundle.min.js我认为问题在这里

output: {
  path: path.resolve(__dirname, "dist"),
  filename: "bundle.min.js"
},

Answer 1

我修复了它。在Webpack开发服务器页面上找到this

并添加了一些规则，更改了我的webpack开发服务器配置

来自此：

devServer: {
  liveReload: true,
  stats: "errors-only",
  hot: true,
  historyApiFallback: true
}

至此：

devServer: {
  liveReload: true,
  stats: "errors-only",
  hot: true,
  historyApiFallback: {
    rewrites: [
      { from: /\/(bundle.min.js$)/, to: 'http://localhost:8080/bundle.min.js' },
      { from: /http:\/\/localhost:8080\/*/, to: 'http://localhost:8080' }
    ]
  }
}