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