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

Question

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

Answer 1

Tout d'abord, vous n'avez pas besoin de faire var r = this; comme ceci dans if statement fait référence au contexte de la fonction de rappel elle-même qui, puisque vous utilisez la fonction flèche, fait référence au contexte du composant React.

Selon les documents :

Les objets historiques possèdent généralement les propriétés et méthodes suivantes :

• length - (nombre) Le nombre d'entrées dans la pile de l'historique.
• action - (string) L'action en cours (PUSH, REPLACE, ou POP)

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

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

Ainsi, tout en naviguant, vous pouvez passer des props à l'objet historique comme suit

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

ou de la même manière pour le Link ou le Redirect composant

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

et ensuite dans le composant qui est rendu avec /template vous pouvez accéder aux props passés de la manière suivante

this.props.location.state.detail

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

Selon les Docs :

avecRouter

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

Answer 2

Que 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 à partir de /template par le code suivant,

const state = this.props.location.state

En savoir plus sur React Gestion de l'historique des sessions

Answer 3

Si vous devez passer des paramètres d'URL

Il y a un grand post d'explication par Tyler McGinnis sur son site, Lien vers l'article

Voici des exemples de code :

1. sur le composant history.push :

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

2. sur le composant du routeur où vous définissez la route :

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

3. sur le composant Accueil :

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

Answer 4

Il n'est pas nécessaire d'utiliser withRouter. Ceci 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 le ComposantA ou le ComposantB, vous pouvez accéder à

this.props.history

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

Answer 5

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