React Router with React 16.6 Suspense “Componente de prop` inválido do tipo `objeto` fornecido para` Rota`, função `esperada`.”
Estou usando a versão mais recente (16.6) do React comreact-router
(4.3.1) e tentando usar a divisão de código usandoReact.Suspense
.
Embora meu roteamento esteja funcionando e o código tenha se dividido em vários pacotes carregados dinamicamente, estou recebendo um aviso sobre não retornar uma função, mas um objeto paraRoute
. Meu 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);
O aviso do console é o seguinte:Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
Uma importação normal retornaria uma função, mas a importação dinâmica comlazy()
está retornando um objeto.
Algumas correções para isso?