Question

上下文：尝试使用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路由器树挂起来。

Similar issue to this one but for Webpack 3

Answer 1

显然添加：

<base href="/" />

到index.html的head标记足以解决此问题。 MEEP

Answer 2

我发现如果您添加：

output: {
  publicPath: '/' 
}

添加到您的webpack.config.js，则无需添加

<base href="/" />

到index.html

请参阅：webpack-dev-server, historyApiFallback not working (webpack-4, react-router-4)

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

2 个答案: