react-router 4 不显示组件

Question

我的 react-redux 应用中有 2 条路由：

ReactDOM.render(

<Provider store={store}>
    <BrowserRouter>

        <div>
            <Route path = '/a' component = {ContainerComponent} />
            <Route path = '/b' component = {ContainerComponent} />
        </div>      

    </BrowserRouter>
</Provider>, 

document.getElementById('app'));

• 在http://localhost:8080/a 上我可以看到我的ContainerComponent。
• 在http://localhost:8080/b 上，我还可以看到我的ContainerComponent。
• 但是在http://localhost:8080/a/b 上，我遇到了 404 错误，尽管我希望同时看到两个 ContainerComponents，就像我在许多教程中看到的那样！

我的 webpack 配置：

var HTMLWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    entry:  __dirname + '/app/index.js',
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }, {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader?modules,localIdentName="[name]-[local]-[hash:base64:6]"'
                })
            }]
    },
    output: {
        filename: 'transformed.js',
        path: __dirname + '/build'
    },
    devServer: {

        historyApiFallback: true

    },
    plugins: [
        HTMLWebpackPluginConfig,
        new ExtractTextPlugin('styles.css')
    ]
};

Answer 1

ReactDOM.render(

<Provider store={store}>
    <BrowserRouter>

        <div>
            <Route path = '/a' component = {ContainerComponent} />
            <Route path = '/b' component = {ContainerComponent} />
            <Route path = '/a/b' component = {ContainerComponent} />

        </div>      

    </BrowserRouter>
</Provider>, 

document.getElementById('app'));

您还需要定义第三条路线。由于路径匹配的功能，在不使用exact 参数的情况下，BrowserRouter 将匹配定义的路径与浏览的 URL 匹配的尽可能多的路由。在这种情况下，使用 URL /a，您将获得两个呈现的组件。但是，如果您浏览 URL /a/b，则唯一匹配该路径的路由是第三个。因为你没有在你的代码中定义你会得到一个正确的 404 错误。

Answer 2

好的，最后通过修改webpack.config.js解决了问题。替换为：

output: {
    filename: 'transformed.js',
    path: __dirname + '/build',
},

用这个：

output: {
    filename: 'transformed.js',
    path: __dirname + '/build',
    publicPath: '/'
},