带有 React 16.6 Suspense 的 React Router "Invalid prop `component` of type `object` supplied to `Route`, expected `function`."

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.

进行代码拆分

尽管我的路由正常工作并且代码确实分成了几个动态加载的包,但我收到了一条警告,提示我不是 return 函数,而是 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`.

正常的导入会 return 一个函数,但是 lazy() 的动态导入是 return 一个对象。

有任何修复吗?

尝试使用 render 道具而不是 component

<Route path="/" render={()=> <Prime />} exact />
<Route path="/demo" render={()=> <Demo />} />

这将在 react-router-dom 版本 4.4+ 中得到修复,因为 issue 建议

您可以等待最终版本,或者如果您今天不想更改代码, 您现在可以通过 yarn add react-router-dom@next

安装测试版

我知道这个答案没有回答原来的问题,但由于我遇到过类似的问题,也许我的解决方案会对其他人有所帮助。

我的错误:

Failed prop type: Invalid prop `component` of type `object` supplied to "link", expected function.

与接受的答案一样,这可以通过以下方式解决:

<Link to={'/admin'} title={'Log In'} component={props => <Button {...props} />} />