React路由器与React 16.6 Suspense"无效的prop`组件`类型`object`提供给`Route`,期望`function`."

Question

我正在使用React的最新版本(16.6)和react-router(4.3.1)并尝试使用代码分割React.Suspense.

虽然我的路由工作正常并且代码确实分裂成了几个动态加载的bundle,但我收到的警告是不返回一个函数,而是一个对象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()将返回一个对象.

对此有任何修复？

Answer 1

尝试使用render道具代替component

render

Answer 2

react-router-dom如本问题所示,这将在版本4.4+中修复

您可以等待最终版本,或者如果您今天不想更改代码,可以立即安装测试版 yarn add react-router-dom@next