web-dev-qa-db-fra.com

React Routeur avec React 16.6 Suspense "Le composant` prop` invalide de type `object` fourni à` Route`, la `fonction` attendue. '."

J'utilise la dernière version (16.6) de React avec react-router (4.3.1) et j'essaie d'utiliser le fractionnement du code en utilisant React.Suspense.

Bien que mon routage fonctionne et que le code se soit divisé en plusieurs ensembles chargés de manière dynamique, je reçois un avertissement sur le fait de ne pas renvoyer de fonction, mais un objet à Route. Mon 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);

L'avertissement de la console est le suivant: Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.

Une importation normale renverrait une fonction, mais l'importation dynamique avec lazy() renvoie un objet.

Des correctifs pour cela?

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

Essayez d'utiliser render prop à la place de component

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

21
Byrd

Ce sera corrigé dans react-router-dom version 4.4+ comme cela numéro suggère

Vous pouvez attendre la version finale ou si vous ne voulez pas changer votre code aujourd'hui, vous pouvez installer la version bêta maintenant par yarn add react-router-dom@next

10
tmvnty

Je sais que cette réponse ne répond pas à la question initiale, mais comme je suis confronté à un problème similaire, peut-être que ma solution aidera d'autres personnes.

Mon erreur:

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

Comme la réponse acceptée, cela pourrait être corrigé avec:

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