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

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

任何帮助表示赞赏。

更新：

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

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

标签： reactjswebpackreact-routerrouterwebpack-dev-server

Answer 1

我修好了它。在 Webpack 开发服务器页面上找到了这个

并添加了一些规则，更改了我的 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' }
    ]
  }
}