Попытка настроить историю редукции, чтобы я мог перенаправить

Я пытаюсь выполнить этот ретранслятор ретрансляции, чтобы я мог перенаправлять, используя push ('/') в моих компонентах или действиях.

Учебник: https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux

Я не уверен, что я пропущу, но я получаю сообщение об ошибке.

Ошибка, которую я получаю в консоли хром:

bundle.js: 3090 Warning: React.createElement: type недопустим - ожидается строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получила: undefined. Вероятно, вы забыли экспортировать свой компонент из файла, который он определил, или вы могли бы перепутать импорт по умолчанию и названный импорт.

Проверьте метод рендеринга Root. в Корневой печатиWarning @bundle.js: 3090

bundle.js: 2684 Ошибка поиска: тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс/функция (для составных компонентов), но полученная: undefined. Вероятно, вы забыли экспортировать свой компонент из файла, который он определил, или вы могли бы перепутать импорт по умолчанию и названный импорт.

bundle.js: 20893 Указанная ошибка произошла в компоненте: в Провайдере (созданном Root) в Root

index.js

import React from 'react';
import { render } from 'react-dom';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
import { routerReducer, routerMiddleware, push } from 'react-router-redux'
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';

import reducers from './reducers';
import Root from './root';

// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory();
let middleware = [thunk, routerMiddleware(history)]

const store = createStore(
  combineReducers({
    ...reducers,
    router: routerReducer
  }),
  applyMiddleware(...middleware)
);

render(
  <Root store={store} history={history} />,
  document.getElementById('app')
);

root.js

import React from 'react';
import PropTypes from 'prop-types';
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
} from 'react-router-dom';
import { ConnectedRouter } from 'react-router-redux';
import { Provider } from 'react-redux';
import App from './components/app';

const Root = ({ store, history }) => (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div className="application-container">
      <App>
        <Switch>
        </Switch>
      </App>
      </div>
    </ConnectedRouter>
  </Provider>
);

Root.propTypes = {
  store: PropTypes.object.isRequired,
  history: PropTypes.object.isRequired,
};

export default Root;

/reducers/index.js

import { combineReducers } from 'redux';
import users from './users';

const reducers = combineReducers({
  users,
});

export default reducers;

users.js

import Constants from '../constants';

const initialState = {
  users: [],
  fetching: false,
};

const users = (state = initialState, action) => {
  switch (action.type) {
    case Constants.LOADING_USERS:
      return {...state, fetching: true};
    default:
      return state;
  }
};

export default users;

my package.json deps:

  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-react-display-name": "^2.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "colors": "^1.1.2",
    "compression": "^1.7.1",
    "eslint": "^4.15.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-babel": "^4.1.2",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.5.1",
    "eslint-watch": "^3.1.3",
    "express": "^4.16.2",
    "jest": "^22.0.6",
    "node-sass": "^4.7.2",
    "npm-run-all": "^4.1.2",
    "redux-devtools": "^3.4.1",
    "sass-loader": "^6.0.6",
    "webpack": "^3.10.0",
    "webpack-dev-middleware": "^2.0.4",
    "webpack-dev-server": "^2.10.1",
    "webpack-hot-middleware": "^2.21.0"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "history": "^4.7.2",
    "lodash": "^4.17.5",
    "moment": "^2.20.1",
    "react": "^16.2.0",
    "react-dnd": "^2.5.4",
    "react-dnd-html5-backend": "^2.5.4",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^4.0.8",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },

Ответы

import { BrowserRouter } from 'react-router-dom'

const AppContainer = () => (
      <ConnectedSwitch>
        <Route exact path="/" component={() => (<h1>Home <Link to="/about">About</Link></h1>)} />
        <Route path="/about" component={() => (<h1>About <Link to="/">Home</Link></h1>)} />
      </ConnectedSwitch>
    )

const App = connect(state => ({
  location: state.location,
}))(AppContainer)

render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root'),
)