title: React Router with React 16.6 Suspense "Invalid prop `component` of type `object` supplied to `Route`, expected `function`."
body: <p>I'm using the latest version (16.6) of React with <code>react-router</code> (4.3.1) and trying to use code splitting using <code>React.Suspense</code>.</p>
  
  <p>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 <code>Route</code>. My code:</p>
  
  <pre><code>import React, { lazy, Suspense } from 'react';
  import { Switch, Route, withRouter } from 'react-router-dom';
  
  import Loading from 'common/Loading';
  
  const Prime = lazy(() =&gt; import('modules/Prime'));
  const Demo = lazy(() =&gt; import('modules/Demo'));
  
  const App = () =&gt; (
    &lt;Suspense fallback={&lt;Loading&gt;Loading...&lt;/Loading&gt;}&gt;
      &lt;Switch&gt;
        &lt;Route path="/" component={Prime} exact /&gt;
        &lt;Route path="/demo" component={Demo} /&gt;
      &lt;/Switch&gt;
    &lt;/Suspense&gt;
  );
  
  export default withRouter(App);
  </code></pre>
  
  <p>The console warning is as follows:
  <code>Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.</code></p>
  
  <p>A normal import would return a function, but the dynamic import with <code>lazy()</code> is returning an object. </p>
  
  <p>Any fixes for this?</p>