React Router с React 16.6 Suspense "Недопустимый компонент prop ` типа `object`, предоставленный для Route`, ожидаемый`function`."

Я использую последнюю версию (16.6) React с 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() возвращает объект.

Какие-нибудь исправления для этого?

Источник

2 ответа

Решение

Попробуйте использовать render опора вместо component

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

Источник

Это будет исправлено в react-router-dom версия 4.4+, как предполагает эта проблема

Вы можете дождаться финальной версии или, если вы не хотите менять свой код сегодня, вы можете установить бета-версию прямо сейчас, yarn add react-router-dom@next

Источник

Я знаю, что этот ответ не отвечает на исходный вопрос, но, поскольку я столкнулся с аналогичной проблемой, возможно, мое решение поможет другим людям.

Моя ошибка:

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

Как и в принятом ответе, это можно исправить с помощью:

<Link to={'/admin'} title={'Log In'} component={props => <Button {...props} />} />
Источник
Другие вопросы по тегам