Я использую последнюю версию (16.6) React with react-router
(4.3.1) и пытаюсь использовать разделение кода с помощью React.Suspense
.
Хотя моя маршрутизация работает, и код разделился на несколько пакетов, загруженных динамически, я получаю предупреждение о том, что не возвращаю функцию, а объект для Route
. Мой код:
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);
Предупреждение о консоли следующее: Warning: Failed prop type: Invalid prop 'component' of type 'object' supplied to 'Route', expected 'function'.
Обычный импорт будет возвращать функцию, но динамический импорт с lazy()
возвращает объект.
Любые исправления для этого?