Comment passer des paramètres avec history.push / Link / Redirect dans react-router v4?

Comment passer un 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 le faire var r = this;car cela if statementfait référence au contexte du rappel lui-même qui, puisque vous utilisez la fonction flèche, fait référence au contexte du composant React.

Selon les documents:

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

• longueur - (nombre) Le nombre d'entrées dans la pile d'historique
• action - (chaîne) L'action en cours (PUSH, REPLACE ou POP)

• location - (object) L'emplacement actuel. Peut avoir les propriétés suivantes:

  • chemin - (chaîne) Le chemin de l'URL
  • search - (chaîne) La chaîne de requête URL
  • hachage - (chaîne) Le fragment de hachage URL
  • état - (chaîne) état spécifique à l'emplacement qui a été fourni, par exemple, à push (chemin, état) lorsque cet emplacement a été poussé sur la pile. Disponible uniquement dans l'historique du navigateur et de la mémoire.
• push (chemin, [état]) - (fonction) Pousse une nouvelle entrée sur la pile d'historique
• replace (chemin, [état]) - (fonction) Remplace l'entrée actuelle sur la pile d'historique
• go (n) - (fonction) Déplace le pointeur dans la pile d'historique de n entrées
• goBack () - (fonction) Équivalent à go (-1)
• goForward () - (fonction) Équivalent à go (1)
• block (prompt) - (fonction) Empêche la navigation

Ainsi, pendant la navigation, vous pouvez passer des accessoires à l'objet historique comme

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

ou de même pour le Linkcomposant ou le Redirectcomposant

<Link to={{
      pathname: '/template',
      search: '?query=abc',
      state: { detail: response.data }
    }}> My Link </Link>

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

this.props.location.state.detail

Gardez également à l'esprit que lorsque vous utilisez des objets d'historique ou de localisation à partir d'accessoires, vous devez connecter le composant withRouter.

Selon les documents:

withRouter

Vous pouvez accéder aux propriétés de l'objet historique et à la <Route>'scorrespondance la plus proche via le withRoutercomposant d'ordre supérieur. withRouter rendra son composant à chaque fois que la route change avec les mêmes accessoires que le <Route>rendu props: { match, location, history }.

vous pouvez utiliser,

this.props.history.push("/template", { ...response }) ou this.props.history.push("/template", { response: response })

alors vous pouvez accéder aux données analysées du /templatecomposant en suivant le code,

const state = this.props.location.state

En savoir plus sur React Session History Management

• Pour les versions antérieures :

  history.push('/path', yourData);

  Et obtenez les données dans le composant associé comme ci-dessous:

  this.props.location.state // it is equal to yourData

• Pour les versions plus récentes, la méthode ci-dessus fonctionne bien, mais il existe une nouvelle méthode:

  history.push({
    pathname: '/path',
    customNameData: yourData,
  });

  Et obtenez les données dans le composant associé comme ci-dessous:

  this.props.location.customNameData // it is equal to yourData

Astuce : le statenom de la clé a été utilisé dans les versions antérieures et pour les versions plus récentes, vous pouvez utiliser votre nom personnalisé pour transmettre des données et l'utilisation du statenom n'est pas essentielle.

Extension de la solution (suggérée par Shubham Khatri) pour une utilisation avec les crochets React (à partir de 16,8):

package.json (always worth updating to latest packages)

{
     ...

     "react": "^16.12.0",
     "react-router-dom": "^5.1.2",

     ...
}

Passer des paramètres avec l'historique push:

import { useHistory } from "react-router-dom";

const FirstPage = props => {
    let history = useHistory();

    const someEventHandler = event => {
       history.push({
           pathname: '/secondpage',
           search: '?query=abc',
           state: { detail: 'some_value' }
       });
    };

};

export default FirstPage;

Accès au paramètre passé à l'aide de useLocation à partir de 'react-router-dom':

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

const SecondPage = props => {
    const location = useLocation();

    useEffect(() => {
       console.log(location.pathname); // result: '/secondpage'
       console.log(location.search); // result: '?query=abc'
       console.log(location.state.detail); // result: 'some_value'
    }, [location]);

};

Si vous devez transmettre des paramètres d'URL

theres une grande explication de poste par Tyler McGinnis sur son site, Lien vers le poste

voici des exemples de code:

1. sur le composant history.push:

   this.props.history.push(`/home:${this.state.userID}`)

2. sur le composant routeur, vous définissez l'itinéraire:

   <Route path='/home:myKey' component={Home} />

3. sur le composant Home:

componentDidMount(){
    const { myKey } = this.props.match.params
    console.log(myKey )
}

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

Dans votre page parent,

<BrowserRouter>
   <Switch>
        <Route path="/routeA" render={(props)=> (
          <ComponentA {...props} propDummy={50} />
        )} />

        <Route path="/routeB" render={(props)=> (
          <ComponentB {...props} propWhatever={100} />
          )} /> 
      </Switch>
</BrowserRouter>

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

this.props.history

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

Pour utiliser React 16.8+ (withHooks), vous pouvez utiliser cette méthode

import React from 'react';
import { useHistory } from 'react-router-dom';

export default function SomeFunctionalComponent() {
let history = useHistory(); // should be called inside react component

const handleClickButton = () => {    
"funcionAPICALL"
       .then(response => {
             if (response.status >= 200 && response.status < 300) {
                 history.push('/template');
              });
}

return ( <div> Some component stuff 
    <p>To make API POST request and redirect to "/template" click a button API CALL</p>
    <button onClick={handleClickButton}>API CALL<button>
</div>)
} 

Source ici pour en savoir plus https://reacttraining.com/react-router/web/example/auth-workflow

Ajoutez des informations pour obtenir les paramètres de 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