React Router with React 16.6 Suspense "Недействительный опорный компонент" объекта типа "поставляется" в "Маршрут", ожидаемая "функция". "

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

Любые исправления для этого?

Ответы

Ответ 1

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

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

Ответ 2

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

Вы можете дождаться финальной версии или если вы не хотите менять свой код сегодня, Вы можете установить бета-версию прямо сейчас yarn add [email protected]

Ответ 3

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

Моя ошибка:

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

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

<Link to={'/admin'} title={'Log In'} component={props => <Button {...props} />} />