web-dev-qa-db-ja.com

React Reactを持つルーター16.6サスペンス「タイプ `object`の無効なprop` component`が `Route`に供給され、期待される` function`です。」

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()を使用した動的インポートではオブジェクトが返されます。

これに対する修正はありますか？

reactjsreact-routerreact-router-v4dynamic-importreact-16
18
ronnyrr

renderの代わりにcomponent propを使用してみてください

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

21
Byrd

これはreact-router-domバージョン4.4+で修正されます issue が示唆するように

最終リリースを待つか、今日コードを変更したくない場合は、yarn add react-router-dom@nextでベータ版をインストールできます

10
tmvnty

この答えは元の質問には答えないことは知っていますが、同様の問題が発生したので、私の解決策が他の人を助けるかもしれません。

私のエラー：

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

受け入れられた答えと同様に、これは次の方法で修正できます。

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