具有 /list/:page 之类路径的 React Router 在重新加载时不起作用答案

【问题标题】：React Router with path like /list/:page does not work on reload具有 /list/:page 之类路径的 React Router 在重新加载时不起作用
【发布时间】：2020-02-28 21:17:05
【问题描述】：

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

<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",

感谢任何帮助。

更新：

此错误出现在所有不适用于 Reload 的路径上。 bundle.min.js 文件的实际路径应该是 http://localhost:8080/bundle.min.js 我认为问题就在这里

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

【问题讨论】：

啊，“不起作用”，这意味着你一定做错了什么。你做错了什么没人知道，因为这里没有足够的信息。也许您可以提供sandbox 和/或解释“不起作用”的含义（预期行为与实际行为和错误）。
重新加载后不工作可能表示服务器端配置问题

标签： reactjs webpack react-router router webpack-dev-server

【解决方案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' }
    ]
  }
}

【讨论】：