20

我正在使用带有react-router(4.3.1) 的最新版本 (16.6) 的 React，并尝试使用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()会返回一个对象。

对此有任何修复吗？

4

3 回答 3

26

尝试使用renderprop 而不是component

<Route path="/" render={()=> <Prime />} exact />
<Route path="/demo" render={()=> <Demo />} />
于 2018-10-27T07:57:10.857 回答
11

正如这个问题所暗示的，这将在react-router-dom4.4+ 版本中修复

您可以等待最终版本，或者如果您今天不想更改代码，您可以通过以下方式安装测试版yarn add react-router-dom@next

于 2018-11-28T10:48:20.350 回答
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} />} />
于 2019-09-19T03:36:56.013 回答