React Router con React 16.6 Suspenso “Componente de prop inválido del tipo` objeto` suministrado a `Ruta`,` función` esperada ”.
Estoy usando la última versión (16.6) de React withreact-router
(4.3.1) y tratando de usar la división de código usandoReact.Suspense
.
Aunque mi enrutamiento funciona y el código se dividió en varios paquetes cargados dinámicamente, recibo una advertencia sobre no devolver una función, sino un objeto aRoute
. Mi código
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);
La advertencia de la consola es la siguiente:Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
Una importación normal devolvería una función, pero la importación dinámica conlazy()
está devolviendo un objeto.
¿Alguna solución para esto?