React 路由器 v4 浏览器历史记录不适用于代码拆分

Question

当使用哈希历史代码拆分与反应路由器一起工作时，但现在我即将投入生产，我想切换到浏览器历史，当我尝试更改路线时它会出错，例如，如果我尝试去到登录路由 127.0.0.1:8080/auth/login :

Refused to execute script from 'http://127.0.0.1:8080/auth/3.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

和

Uncaught (in promise) Error: Loading chunk 3 failed. (error: http://127.0.0.1:8080/auth/3.bundle.js) at HTMLScriptElement.onScriptComplete (bootstrap:108)

这是我的路由器

<Router history={history}>
    <ConnectApp />
</Router>

连接应用：

 <Switch>
    {/* Front end */}
    <Route path="/" component={AsyncHome} exact />
    <Route path="/post/:id" component={AsyncPost} exact />

    {/* authentication */}
    <Route path="/auth/:section" component={AsyncLogin} exact />

    {/* Backend */}
    <PrivateRoute path="/admin/:path" component={AsyncAdmin} exact />
    <PrivateRoute
        path="/admin/edit-post/:id"
        component={AsyncEditPost}
        exact
    />

    <Route component={Err404} />
</Switch>

history.js:

import { createBrowserHistory } from 'history';

export default createBrowserHistory({
    // add configurations here
});

webpack.dev.config.js

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        historyApiFallback: true
    }, 
    plugins: [
        new BundleAnalyzerPlugin()
    ]
}

*如有代码需要补充请在评论中注明

谢谢

Answer 1

将 publicPath:"/" 添加到配置中：

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        historyApiFallback: true
    }, 
    plugins: [
        new BundleAnalyzerPlugin()
    ],

    output: {
        path: path.resolve('dist'),
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js',
        publicPath: '/' // Add this line
    },
}

React 路由器 v4 浏览器历史记录不适用于代码拆分

React router v4 broswer history not working with code splitting

javascript

reactjs

webpack

react-router-v4