React Router与React 16.6 Suspense一起使用时，出现“传递给Route的类型为对象的'component'无效prop，预期为函数。”的错误提示。

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() 的动态导入会返回一个对象。

有任何解决方法吗？

- ronnyrr

---

这很奇怪，你可以尝试像这样做：<Route path="/" component={() => <Prime/>} exact />。 - kasho

@kasho 这完全破坏了我的应用程序。找到了这个问题，似乎有一个解决方案：https://github.com/ReactTraining/react-router/issues/6420 - ronnyrr

Answer 1

尝试使用render prop而不是component

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

- Byrd

---

谢谢！解决方案：<Route exact path="/" component={props => <Prime {...props} />} /> 的意思是，在路径为 "/" 时，呈现名为 "Prime" 的组件。 - ronnyrr

ronnyrr的解决方案对我很有效。此外，我还升级到了最新版本的React和React Router（react-dom 16.6.3 - react-router-dom 4.3.1）。 - Jason Allshorn

这不是一个好的解决方案，因为如果你的redux连接在这些组件的层次结构之上，它将导致这些组件的不断卸载和重新挂载。 - whitehawk

所以最好的方法是： } />在这种情况下，您还可以在组件内部接收到 props。 - Jimmy Chu

在component属性中使用内联箭头函数作为参数将导致每次路由更改时重新渲染，如果您嵌套路由并依赖于呈现的子组件中的生命周期方法，则可能会出现问题。我建议使用@tmvnty的解决方案。 - jmarceli

Answer 2

根据这个问题的建议，这将在 react-router-dom 4.4+版本中得到修复。

如果您不想今天更改您的代码，您可以等待最终发布；或者您可以通过yarn add react-router-dom@next安装beta版。

- zenoh

---

我可以确认 react-router-dom v5.0.0 解决了这个问题。v4.4.x 似乎只是在主要的 v5.0.0 发布之前进行了 beta 版本发布。 - Erik Töyrä Silfverswärd

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} />} />

- Yulio Aleman Jimenez