Check the render method

Question

I am using react, redux and react-redux-router. When I run an application I get an error. I do not understand what it has to do with the render function of react in my App.js. It seems to me that problem is lying somewhere else in the code.

The error are as follows:

 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `App`.
 in App
 in Router (created by ConnectedRouter)
 in ConnectedRouter
 in Provider       
 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `App`.

My javascript App file code is shown below.

 import React from 'react';
 import Header from './common/Header';
 import HomePage from '../components/home/HomePage';
 import Routes from '../routes';            
 const App = () => (
   <div>
   <Header />              
   <Routes />
   </div>
     )

 export default App;

my Javascript index file code is shown below

 import 'babel-polyfill';
 import React from 'react';
 import {render} from 'react-dom';
 import {Provider} from 'react-redux';
 import {BrowserRouter as Router} from 'react-router-dom';
 import configureStore, {history} from './store/configureStore';
 import {loadProducts} from './actions/homeAction';
 import routes from './routes';
 import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 import {ConnectedRouter} from 'react-router-redux';
 import createHistory from 'history/createBrowserHistory'
 import App from './components/App';    

  const store = configureStore();
  store.dispatch(loadProducts("http://localhost:1219/portal/getProducts"));        
 render(
    <Provider store={store}>
    <ConnectedRouter history={history}>
     <App />
     </ConnectedRouter>
     </Provider>,
     document.getElementById('app')
  );

Any help would be appreciated. If you would like more detail please let me know

Answer 1

For me it seemed like I had to remove the MemoryRouter or ConnectedRouter in your case.

Also, note that my issue was in my App.test.js file so it may not apply to OP's specific use case but it might help those of you whom arrived here through Google.

Can someone please explain why this works?

This is the code that is now working:

<Provider store={store}>
     <App />
</Provider>

This is the original non-working code:

<Provider store={store}>
    <ConnectedRouter history={history}>
        <App />
    </ConnectedRouter>
</Provider>