Неудачный тип пропеллера: недопустимый подпор `компонент` типа` объект`, переданный в `Маршрут`, ожидаемая` функция`

Question

Я только что обновил свое приложение React до 16.6.0 и реактивные сценарии до 2.0.3, чтобы начать использовать lazy, и я получил эту ошибку, когда следовал примеру на официальных документах:

Неудачный тип проп: недействительныйprop component типа object, поставляемый на Route, ожидаемый function

Несмотря на это, кажется, что все работает, кроме этой ошибки в консоли.

Вот некоторыемоего кода:

// imports here
... 
const Decks = lazy(() => import('./pages/Decks'));
...
class App extends Component {
      ...

    render() {
        return (
            <ConnectedRouter history={history}>
                <div>
                    <MenuAppBar />

                    <div style={{paddingTop: '4rem'}}>
                        <Suspense fallback={<LazyLoading />}>
                            <Switch>
                                <Route exact path="/" component={Home} />
                                <Route path="/decks" component={Decks} />
                                ...
                            </Switch>
                        </Suspense>
                    </div>

                    <Footer />
                </div>
            </ConnectedRouter>
        );
    }

...}

Что я могу здесь делать не так?

Answer 1

Обновите "response-router-dom" до "^ 4.4.0-beta.6", чтобы исправить это.

Это ошибка: https://github.com/ReactTraining/react-router/issues/6420#issuecomment-435171740

Answer 2

При использовании лениво загруженного компонента вам необходимо будет передать его компоненту маршрута, например

// imports here
... 
const Decks = lazy(() => import('./pages/Decks'));
...
class App extends Component {
      ...

    render() {
        return (
            <ConnectedRouter history={history}>
                <div>
                    <MenuAppBar />

                    <div style={{paddingTop: '4rem'}}>
                        <Suspense fallback={<LazyLoading />}>
                            <Switch>
                                <Route exact path="/" component={Home} />
                                <Route path="/decks" render={(props) => <Decks {...props} />} />
                                ...
                            </Switch>
                        </Suspense>
                    </div>

                    <Footer />
                </div>
            </ConnectedRouter>
        );
    }
... 
}

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