HistoryApiFallback 不适用于 Webpack 4（使用 React Router 4 和嵌套路由）答案

【问题标题】：HistoryApiFallback not working on Webpack 4 (with React Router 4 and nested routes)HistoryApiFallback 不适用于 Webpack 4（使用 React Router 4 和嵌套路由）
【发布时间】：2018-09-29 07:59:59
【问题描述】：

上下文：使用 webpack 4 试用 RR4 (devServer: {apiHistoryFallback: true} Sample Webpack 4 config

http://localhost:8080/reports 在剪切并粘贴到地址栏中时有效（又名历史回退正在工作）我可以单击 /reports/8 的链接，因为我已经在 /reports 处添加了到组件的嵌套路由

<Route path=${match.path}/:reportId component={ReportDetail}/>

但是将http://localhost:8080/reports/9 剪切并粘贴到地址栏中，我得到一个空白屏幕和一个： Refused to execute script from 'http://localhost:8080/reports/main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. 尝试为 devServer 设置 contentBase，但这并没有解决问题。

此功能在 Webpack 3 和 RR3 中运行良好。不确定是使用 Webpack 还是 React Router 树。

【问题讨论】：

标签： javascript webpack webpack-dev-server react-router-v4

【解决方案1】：

显然添加：

<base href="/" />

到您的index.html 的头部标签就足以解决这个问题。米普

【讨论】：

【解决方案2】：

我发现如果你添加：

output: {
  publicPath: '/' 
}

到你的 webpack.config.js 然后你不需要添加

<base href="/" />

到 index.html

见：webpack-dev-server, historyApiFallback not working (webpack-4, react-router-4)

【讨论】：