如何在导航器控制台中修复“ TypeError：context.store未定义”

Question

我正在基于react设置一个wordpress模板，并使用webpack进行编译。我在导航器中收到这些错误消息，而react的js脚本未启动。

Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
    in Route
Warning: Failed context type: The context `store` is marked as required in `ConnectedRouter`, but its value is `undefined`.
    in ConnectedRouter (created by ConnectFunction)
    in ConnectFunction
    in Provider
The above error occurred in the <ConnectedRouter> component:
    in ConnectedRouter (created by ConnectFunction)
    in ConnectFunction
    in Provider

Consider adding an error boundary to your tree to customize error handling behavior.

TypeError: context.store is undefined

这是我的package.json：

    "autoprefixer": "*",
    "axios": "*",
    "babel-core": "^6.26",
    "babel-loader": "^7.1",
    "babel-polyfill": "*",
    "babel-preset-env": "*",
    "babel-preset-minify": "*",
    "babel-preset-react": "*",
    "babel-preset-stage-2": "*",
    "caniuse-lite": "*",
    "connected-react-router": "^4.3",
    "css-loader": "*",
    "cssnano": "*",
    "mini-css-extract-plugin": "*",
    "history": "*",
    "node-sass": "*",
    "postcss-preset-env": "*",
    "postcss-import": "*",
    "postcss-loader": "*",
    "react": "*",
    "react-addons-css-transition-group": "*",
    "react-dom": "^16.2",
    "react-redux": "*",
    "react-router": "^4.2",
    "react-router-dom": "^4.2",
    "redux": "*",
    "redux-logger": "*",
    "redux-promise-middleware": "^5.0",
    "redux-thunk": "*",
    "sass-loader": "*",
    "style-loader": "*",
    "webpack": "*"
  },
  "devDependencies": {
    "webpack-cli": "*"
  }

还有我的webpack.config.js：

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: './src/index.js',
    output: {
        path: __dirname,
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['env', 'stage-2', 'react', 'minify'],
                },
            },
            {
                test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
                            sourceMap: true,
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          'css-loader',
          'sass-loader',
        ],
            },
        ],
    },
    plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // all options are optional
      filename: '[name].css',
      chunkFilename: '[id].css',
      ignoreOrder: false, // Enable to remove warnings about conflicting order
    }),
  ],
};

还有src / index.js：

require('./sass/styles.scss');

import 'babel-polyfill';
import React from 'react';
import ReactDom from 'react-dom';
import {Provider} from 'react-redux';
import {Router, Route, Switch} from 'react-router-dom';
import {createBrowserHistory} from 'history';

import {createStore, compose, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import promise from 'redux-promise-middleware';
import {createLogger} from 'redux-logger';
import {routerMiddleware, connectRouter, ConnectedRouter} from 'connected-react-router';

import rootReducer from './reducers';


const siteBaseUrl = RT_API.baseUrl.replace(['http://','https://'],'').replace(window.location.origin.replace(['http://','https://'],''), '');
const history = createBrowserHistory({basename: siteBaseUrl});
const store = createStore(
    connectRouter(history)(rootReducer),
    compose(
        applyMiddleware(
            routerMiddleware(history),
            promise(),
            thunk,
            createLogger()
        )
    )
);

import Blog from './containers/blog';
import Search from './containers/search';
import Category from './containers/category';
import Tag from './containers/tag';
import Single from './containers/single';

ReactDom.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <Switch>
                <Route exact path="/" component={Blog}/>
                <Route path="/page/:pageNum" component={Blog}/>
                <Route path="/search/:term" component={Search}/>
                <Route path="/category/:slug/page/:pageNum" component={Category}/>
                <Route path="/category/:slug/" component={Category}/>
                <Route path="/category/:parent/:slug/page/:pageNum" component={Category}/>
                <Route path="/category/:parent/:slug/" component={Category}/>
                <Route path="/tag/:slug/page/:pageNum" component={Tag}/>
                <Route path="/tag/:slug" component={Tag}/>
                <Route path="*" component={Single}/>
            </Switch>
        </ConnectedRouter>
    </Provider>,
    document.getElementById('react-main')
);

这是我的第一个webpack / react配置，我真的需要帮助来解决路由器配置问题。