带有React 16.6 Suspense的React Router“向“ Route”提供了类型为“ object”的无效prop`component`，预期为“ function”。”

Question

I'm using the latest version (16.6) of React with react-router (4.3.1) and trying to use code splitting using React.Suspense .

Although my routing is working and the code did split into several bundles loaded dynamically, I'm getting a warning about not returning a function, but an object to Route . My code:

import React, { lazy, Suspense } from 'react';
import { Switch, Route, withRouter } from 'react-router-dom';

import Loading from 'common/Loading';

const Prime = lazy(() => import('modules/Prime'));
const Demo = lazy(() => import('modules/Demo'));

const App = () => (
  <Suspense fallback={<Loading>Loading...</Loading>}>
    <Switch>
      <Route path="/" component={Prime} exact />
      <Route path="/demo" component={Demo} />
    </Switch>
  </Suspense>
);

export default withRouter(App);

The console warning is as follows: Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.

A normal import would return a function, but the dynamic import with lazy() is returning an object.

Any fixes for this?

Answer 1

Try using render prop instead of component

<Route path="/" render={()=> <Prime />} exact />
<Route path="/demo" render={()=> <Demo />} />

Answer 2

This will be fixed in react-router-dom version 4.4+ as this issue suggests

You can wait for the final release or if you don't want to change your code today, you can install the beta version now by yarn add react-router-dom@next

Answer 3

I know this answer do not respond the original question, but as I have experienced a similar issue, maybe my solution will help another people.

My Error:

Failed prop type: Invalid prop `component` of type `object` supplied to "link", expected function.

Alike the accepted answer, this could be fixed with:

<Link to={'/admin'} title={'Log In'} component={props => <Button {...props} />} />