Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`
When using a lazy loaded component, you would need to supply it to the Route component like
// imports here
...
const Decks = React.lazy(() => import('./pages/Decks'));
...
class App extends Component {
...
render() {
return (
<ConnectedRouter history={history}>
<div>
<MenuAppBar />
<div style={{paddingTop: '4rem'}}>
<Suspense fallback={<LazyLoading />}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/decks" render={(props) => <Decks {...props} />} />
...
</Switch>
</Suspense>
</div>
<Footer />
</div>
</ConnectedRouter>
);
}
...
}
Probably its an incorrect PropType check in react-router and may have been fixed in the latest versions to make it compatible with react v16.6
Update "react-router-dom" to "^4.4.0-beta.6" cat fix it.
It is a bug: https://github.com/ReactTraining/react-router/issues/6420#issuecomment-435171740