HistoryApiFallback在Webpack 4上不起作用（使用React Router 4和嵌套路由）

Question

上下文：使用Webpack 4嘗試RR4（devServer：{apiHistoryFallback：true} 示例Webpack 4配置

將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樹。

與這個類似的問題，但對於Webpack 3

Answer 1

顯然添加：

<base href="/" />

放在index.html的head標簽上就足以解決此問題。 米普

Answer 2

我發現，如果添加：

output: {
  publicPath: '/' 
}

到webpack.config.js，那么您不需要添加

<base href="/" /> 

到index.html

請參閱： webpack-dev-server，historyApiFallback不起作用（webpack-4，react-router-4）