reactjs - React Router 与 React 16.6 Suspense "Invalid prop ` 组件`类型为 `object` 提供给 `Route` ，预期为 `function` 。”

Question

我正在使用 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);

控制台警告如下: 警告:失败的 prop 类型:提供给 `Route` 的 `object` 类型的 prop `component` 无效，预期为 `function`。

普通导入将返回一个函数，但使用 lazy() 的动态导入将返回一个对象。

有什么解决办法吗？

Answer 1

尝试使用 render 属性而不是 component

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