wake-up-neo.com

React Router mit React 16.6 Suspense "Ungültige Requisitenkomponente vom Typ Objekt an Route übergeben, erwartete Funktion."

Ich verwende die neueste Version (16.6) von React mit react-router (4.3.1) und versuche, die Codeteilung mit React.Suspense Zu verwenden.

Obwohl mein Routing funktioniert und der Code in mehrere dynamisch geladene Bundles aufgeteilt wurde, wird eine Warnung angezeigt, dass keine Funktion, sondern ein Objekt an Route zurückgegeben wird. Mein Code:

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

Die Konsolenwarnung lautet wie folgt: Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.

Ein normaler Import würde eine Funktion zurückgeben, aber der dynamische Import mit lazy() gibt ein Objekt zurück.

Irgendwelche Fixes dafür?

18
ronnyrr

Versuchen Sie es mit render prop anstelle von component

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

21
Byrd

Dies wird in react-router-dom Version 4.4+ behoben, wie dies Problem nahelegt

Sie können auf die endgültige Veröffentlichung warten oder wenn Sie Ihren Code heute nicht ändern möchten, können Sie die Beta-Version jetzt mit yarn add [email protected] Installieren.

10
tmvnty

Ich weiß, dass diese Antwort nicht die ursprüngliche Frage beantwortet, aber da ich ein ähnliches Problem erlebt habe, hilft meine Lösung möglicherweise anderen Menschen.

Mein Fehler:

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

Wie die akzeptierte Antwort könnte dies behoben werden mit:

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