Question

我刚刚将我的React应用程序更新为16.6.0，并将react-scripts更新为2.0.3，以开始使用lazy，并且在官方文档上按照示例操作时出现此错误：

道具类型失败：提供给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

使用延迟加载的组件时，您需要将其提供给Route组件，例如

// 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>
        );
    }
... 
}

可能是在react-router中的PropType检查不正确，并且可能已在最新版本中修复，以使其与react v16.6兼容

Answer 2

将“ react-router-dom”更新为“ ^ 4.4.0-beta.6”，并进行修复。

这是一个错误：https://github.com/ReactTraining/react-router/issues/6420#issuecomment-435171740

道具类型失败：提供给“路线”的“对象”类型的道具“组件”无效，预期是“功能”

2 个答案: