尝试设置redux历史记录,以便我可以重定向

Question

我试图遵循这个反应路由器redux所以我可以使用我的组件或操作中的推送('/')重定向.

教程:https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux

我不知道我错过了什么,但我收到了一个错误.

我在chrome控制台中遇到的错误是:

bundle.js:3090警告:React.createElement:type无效 - 期望一个字符串(对于内置组件)或类/函数(对于复合组件)但得到:undefined.您可能忘记从其定义的文件中导出组件,或者您可能混淆了默认导入和命名导入.

检查渲染方法Root.在Root printWarning @ bundle.js:3090

bundle.js:2684未捕获错误:元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:undefined.您可能忘记从其定义的文件中导出组件,或者您可能混淆了默认导入和命名导入.

bundle.js:20893组件中出现上述错误:在Root中的Provider(由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;

我的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"
  },

Answer 1

这可能是依赖性不匹配的问题.存储库还提到了一些与此相关的内容:

这(react-router-redux 5.x)是react-router-redux的版本,用于react-router 4.x. react-2.x和3.x的用户希望使用遗留存储库中的react-router-redux.

这是一个使用react-router-redux5.x和react-router4.x 的工作代码框,用于同一个教程.

更新:好像你正在使用react-router-redux可能导致错误的4.x. 此沙箱使用v4.x并抛出错误