当前位置: 首页 > 知识库问答 >
问题:

失败的道具类型:为“路由”提供的“对象”类型的无效道具“组件”,应为“函数”`

阎咏思
2023-03-14

我刚刚将React应用程序更新为16.6。0并将脚本响应到2.0。3开始使用lazy时,我在官方文档上遵循一个示例时遇到了这个错误:

失败的道具类型:提供给路线对象类型的无效道具组件,应为功能

忽略它,一切似乎都在工作,除了控制台中的这个错误。

以下是我的一些代码:

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

...}

我在这里做错了什么?

共有2个答案

周瀚
2023-03-14

将“react router dom”更新为“^4.4.0-beta.6”cat修复。

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

万俟浩
2023-03-14

使用延迟加载组件时,需要将其提供给路由组件,如

// imports here
... 
const Decks = React.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路由器中的PropType签入不正确,可能在最新版本中已修复,以使其与react v16兼容。6.

 类似资料: