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);

控制台警告如下： Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.

正常导入将返回一个函数，但是带有lazy()的动态导入将返回一个对象。

对此有任何解决办法吗？

Answer 1

尝试使用render道具代替component

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

Answer 2

这将在issue建议的react-router-dom 4.4+版本中修复

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

立即安装测试版。

Answer 3

我知道这个答案并不能回答最初的问题，但是由于我遇到过类似的问题，也许我的解决方案会帮助其他人。

我的错误：

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

与已接受的答案类似，可以通过以下方式解决此问题：

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

带有React 16.6 Suspense的React Router“向“路线”提供了“对象”类型的无效道具“组件”，预期为“功能”。”

3 个答案: