javascript - React Router 子路由未显示

Question

我正在使用 react-router-dom 在我的应用程序中进行路由。我在显示子路线时遇到困难。我有 2 条路线，localhost:8080/和 localhost:8080/posts/new。 localhost:8080/路由按预期工作。如果我将第二条路由更改为/posts，例如 localhost:8080/posts，那么它将毫无问题地显示。我在 '/' 路由上使用了 exact prop，并在 webpack devServer 中设置了以下配置:{historyApiFallback: true}，但这并不能解决问题。

我在控制台中收到 2 个错误:

错误 #1: GET http://localhost:8080/posts/bundle.js 404(未找到)。

错误#2:拒绝从“http://localhost:8080/posts/bundle.js”执行脚本' 因为它的 MIME 类型('text/html')不可执行，并且启用了严格的 MIME 类型检查。

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import reduxPromise from 'redux-promise';

import reducers from './reducers/index';
import PostsIndex from './components/posts-index';
import PostsNew from './components/posts-new';

const createStoreWithMiddleware = applyMiddleware(reduxPromise)(createStore);

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
      <Router>
        <Switch>
            <Route exact path="/" component={PostsIndex} />
            <Route path="/posts/new" component={PostsNew} />
        </Switch>
      </Router>
   </Provider>, document.querySelector('.container'));

webpack.config.js

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename:'bundle.js'
    },
    module: {
        rules: [
            {
                exclude: /node_modules/,
                test: /\.js$/,
                use: 'babel-loader'
            }
        ]
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        })
    ],
    devServer: {
        historyApiFallback: true
    }
}

感谢任何帮助。

Answer 1

HTMLWebpackPlugin前置output.publicPath它注入(inject)到 HTML 文件中的所有 Assets 。如果没有publicPath , JavaScript 文件将被注入(inject)为 <script src="bundle.js"></script> .正因为如此，bundle.js将相对于您当前的 url 加载，这不是您想要的。

设置publicPath至 /它应该按预期工作。

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename:'bundle.js',
        publicPath: '/'
    },
    // ...
}