web-dev-qa-db-fra.com

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

Comment pouvons-nous passer le 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');
          });
reactjsreact-router
125
IshanGarg

Tout d'abord, vous n'avez pas besoin de faire var r = this;, car ceci dans if statement fait 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 docs:

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) Action actuelle (Push, REPLACE ou POP)

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

    • chemin d'accès - (chaîne) Le chemin de l'URL
    • search - (string) La chaîne de requête d'URL
    • hash - (string) Le fragment de hachage de l'URL
    • state - (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. Uniquement disponible dans l'historique du navigateur et de la mémoire.
  • Push (chemin, [état]) - (fonction) Insère une nouvelle entrée dans 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) Equivalent à go (-1)
  • goForward () - (fonction) Equivalent à go (1)
  • block (Invite) - (fonction) Empêche la navigation

Ainsi, lors de la navigation, vous pouvez transmettre des accessoires à l'objet d'historique, comme

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

ou similaire pour le composant Link ou le composant Redirect

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

puis dans le composant 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 objets d'historique ou de localisation provenant d'accessoires, vous devez connecter le composant avec withRouter.

Selon les documents:

--- (avec routeur

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

273
Shubham Khatri

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 du composant /template en suivant le code,

const state = this.props.location.state

Voici le lien pour documentation de l'API

10
Tenusha

Si vous devez transmettre des paramètres d'URL

theres un excellent post explication par Tyler McGinnis sur son site, Lien vers le post

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 la route:

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

  3. sur le composant Accueil:

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

5
shyke

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

Dans votre page parente,

<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

objet, y compris la méthode this.props.history.Push.

1
joedotnot