Comment passer des parameters avec history.push dans react-router v4?

Comment pouvons-nous passer paramètre avec this.props.history.push('/page') dans React-Router v4?

 .then(response => { var r = this; if (response.status >= 200 && response.status < 300) { r.props.history.push('/template'); }); 

Tout d’abord, vous n’avez pas besoin de faire var r = this; comme ceci dans l’ if statement fait référence au contexte du rappel lui-même qui, depuis que vous utilisez la fonction flèche, fait référence au contexte du composant Réagir.

Selon les documents:

Les objects d’historique ont généralement les propriétés et méthodes suivantes:

  • length – (number) Le nombre d’entrées dans la stack d’historique
  • action – (ssortingng) L’action en cours (PUSH, REPLACE ou POP)
  • location – (object) L’emplacement actuel. Peut avoir les propriétés suivantes:

    • chemin d’access – (chaîne) Chemin de l’URL
    • search – (ssortingng) La chaîne de requête URL
    • hash – (chaîne) Le fragment de hachage de l’URL
    • state – (ssortingng) état spécifique à l’emplacement fourni, par exemple, push (chemin, état) lorsque cet emplacement a été placé sur la stack. Disponible uniquement dans l’historique du navigateur et de la mémoire.
  • push (path, [state]) – (fonction) Pousse une nouvelle entrée sur la stack d’historique
  • replace (path, [state]) – (fonction) Remplace l’entrée en cours sur la stack d’historique
  • go (n) – (fonction) Déplace le pointeur dans la stack d’historique par n entrées
  • goBack () – (fonction) Équivalent pour aller (-1)
  • goForward () – (fonction) Équivalent pour aller (1)
  • block (prompt) – (fonction) Empêche la navigation

Ainsi, tout en naviguant, vous pouvez transmettre des objects à l’object historique comme

 this.props.history.push({ pathname: '/template', search: '?query=abc', state: { detail: response.data } }) 

ou similaire pour le composant de liaison

  My Link  

et puis dans le composant qui est rendu avec /template route, vous pouvez accéder aux accessoires passés comme

 this.props.location.state.detail 

N’oubliez pas non plus que lorsque vous utilisez des objects d’historique ou d’emplacement des accessoires, vous devez connecter le composant avec withRouter .

Selon les documents:

avec routeur

Vous pouvez accéder aux propriétés de l’object historique et à la correspondance 's la plus proche via le composant d’ordre supérieur withRouter . withRouter son composant à chaque fois que la route change avec les mêmes propriétés que render props: { match, location, history } .

Il n’est pas nécessaire d’utiliser withRouter. Cela fonctionne pour moi:

Dans votre page parent,

    (  )} />  (  )} />   

Ensuite, dans ComponentA ou ComponentB, vous pouvez accéder à

this.props.history

object, y compris la méthode this.props.history.push.

Ajoutez des informations pour obtenir les parameters de la requête.

 const queryParams = new URLSearchParams(this.props.location.search); console.log('assuming query param is id', queryParams.get('id'); 

Pour plus d’informations sur URLSearchParams, consultez ce lien URLSearchParams