CODEWITHSUNDEEP
reactjsreact-routerreact-redux
coder14
coder14

Reputation: 223

Problems with React Router Redux ("React.createElement: type is invalid" error)

I've got some problems setting up React-Router-Redux. I'm just following the basic example on https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux#usage.

My App.jsx looks like this:

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import createHistory from 'history/createBrowserHistory';

import Home from './containers/Home';
import About from './containers/About';
import store from './store';

const history = createHistory();

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

export default App;

When I save this, I get the following error:

React.createElement: 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.

Check your code at App.js:25.

And line 25 is: <ConnectedRouter history={history}>

Can someone help me out?

These are my dependencies:

"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"history": "^4.7.2",
"redux": "^3.7.2",

Upvotes: 3

Views: 628

Answers (1)

Mikhail Shabrikov
Mikhail Shabrikov

Reputation: 8509

ConnectedRouter component available for react-router-redux version 5. Look at this issue. As we can see from your dependencies, you are using react-router-redux version 4 currently.

So you should upgrade your react-router-redux package this way:

if you use npm:

npm install react-router-redux@next

or if you use yarn:

yarn add react-router-redux@next

Upvotes: 5

Related Questions