具有React 16.6的React Router Suspense“提供给Route的对象类型为无效的道具prop组件,预期为功能". [英] React Router with React 16.6 Suspense "Invalid prop `component` of type `object` supplied to `Route`, expected `function`."
问题描述
我正在将React的最新版本(16.6)与react-router
(4.3.1)配合使用,并尝试使用React.Suspense
进行代码拆分.
I'm using the latest version (16.6) of React with react-router
(4.3.1) and trying to use code splitting using React.Suspense
.
尽管我的路由工作正常,并且代码确实分成了多个动态装入的包,但我收到有关不返回函数,而是将对象返回给Route
的警告.我的代码:
Although my routing is working and the code did split into several bundles loaded dynamically, I'm getting a warning about not returning a function, but an object to Route
. My code:
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()
的动态导入将返回一个对象.
A normal import would return a function, but the dynamic import with lazy()
is returning an object.
对此有任何解决办法吗?
Any fixes for this?
推荐答案
尝试使用render
道具代替component
<Route path="/" render={()=> <Prime />} exact />
<Route path="/demo" render={()=> <Demo />} />
这篇关于具有React 16.6的React Router Suspense“提供给Route的对象类型为无效的道具prop组件,预期为功能".的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!