Joey Yi Zhao
Joey Yi Zhao

Reputation: 42454

Get `Element type is invalid: expected a string ` error when using react-redux-router

I am using react-router-redux from this repo https://github.com/reacttraining/react-router/tree/master/packages/react-router-redux to route my application. But I always get below error in my browser console:

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.

Below is the source code of App component. All these codes are the front end:

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>
    );
  }
}

Below is the Home component code:

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

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

Upvotes: 2

Views: 640

Answers (1)

Joey Yi Zhao
Joey Yi Zhao

Reputation: 42454

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.

Upvotes: 3

Related Questions