Маршрутизатор React с приостановкой React 16.6 «Недопустимый prop` component` типа `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() возвращает объект.
Какие-нибудь исправления для этого?
@kasho Это полностью ломает мое приложение. Нашел эту проблему, кажется, решение: github.com/ReactTraining/react-router/issues/6420
Ответы 3
Попробуйте использовать опору render вместо component
<Route path = "/" render = {()=> <Prime />} exact />
<Route path = "/demo" render = {()=> <Demo />} />
Спасибо! Решение: <Route exact path = "/" component = {props => <Prime {...props} />} />
Решение ronnyrr сработало для меня. Также я обновился до последней версии React и React router (react-dom 16.6.3 - react-router-dom 4.3.1)
Это не очень хорошее решение, потому что это приведет к постоянному отключению и повторному подключению этих компонентов, если ваше соединение redux находится выше этого в иерархии.
Итак, лучший способ: javascript <Route exact path = "/" render = {props => <Prime {...props} />} /> В этом случае вы также получили props внутри компонента.
Использование встроенной стрелочной функции в качестве аргумента для свойства component вызовет повторную визуализацию при каждом изменении маршрута, что может быть проблематичным, если вы вкладываете маршруты и передаете методы жизненного цикла в визуализированные подкомпоненты. Вместо этого я бы выбрал решение @tmvnty.
Это будет исправлено в react-router-dom версии 4.4+, как предполагает этот проблема.
Вы можете дождаться финальной версии или, если вы не хотите менять свой код сегодня,
вы можете установить бета-версию прямо сейчас с yarn add react-router-dom@next
Могу подтвердить, что react-router-dom v5.0.0 решает эту проблему. Похоже, что версия v4.4.x была бета-версией только до основного выпуска v5.0.0.
Я знаю, что этот ответ не отвечает на исходный вопрос, но, поскольку я столкнулся с аналогичной проблемой, возможно, мое решение поможет другим людям.
Моя ошибка:
Failed prop type: Invalid prop `component` of type `object` supplied to "link", expected function.
Как и в принятом ответе, это можно исправить с помощью:
<Link to = {'/admin'} title = {'Log In'} component = {props => <Button {...props} />} />
Странно, что вы можете попробовать что-то вроде <Route path = "/" component = {() => <Prime />} exact />