获取`元素类型无效:使用react-redux-router时出现字符串错误

时间:2017-12-17 06:24:10

标签: reactjs react-router react-redux react-router-redux react-router-dom

我正在使用此回购https://github.com/reacttraining/react-router/tree/master/packages/react-router-redux中的react-router-redux来路由我的应用程序。 但我总是在浏览器控制台中出现以下错误:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

以下是App组件的源代码。所有这些代码都是前端:

const history = createHistory();
const rMiddleware = routerMiddleware(history);
const logger = createLogger({
  log: 'info',
});

const store = compose(
  applyMiddleware(thunk, authMiddleware, rMiddleware, logger)
)(createStore)(combineReducers({...reducers, router: routerReducer}));

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <Switch>
              <Route exact path="/" component={Home} />
          </Switch>
        </ConnectedRouter>
      </Provider>
    );
  }
}

以下是Home组件代码:

class Home extends React.Component {
  render() {
    return <div>Home</div>;
  }
}
const mapStateToProps = state => {
  return {
  };
};

const mapDispatchToProps = dispatch => {
  return {
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);

1 个答案:

答案 0 :(得分:3)

Ok finally found out the issue. It because of a version miss-match. I should use "react-router-redux": "^5.0.0-alpha.9", instead of version 4.x.x since it is not compatible with react-router 4.x.x.