我正在将React的最新版本(16.6)与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()
的动态导入将返回一个对象。
对此有任何解决办法吗?
答案 0 :(得分:19)
尝试使用render
道具代替component
<Route path="/" render={()=> <Prime />} exact />
<Route path="/demo" render={()=> <Demo />} />
答案 1 :(得分:7)
这将在issue建议的react-router-dom
4.4+版本中修复
您可以等待最终版本,或者如果您今天不想更改代码,
您可以通过yarn add react-router-dom@next
答案 2 :(得分: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} />} />