web-dev-qa-db-fra.com

Réagir le routeur, transmettre des données lors de la navigation par programme?

Nous pourrions naviguer vers un chemin différent en utilisant

this.props.router.Push('/some/path')

Est-il possible d'envoyer des paramètres (objets) lors de la navigation?

Il y a d'autres options auxquelles je peux penser, mais je me demande si passer object est possible?

  • Je pourrais incorporer l'identifiant de l'objet et extraire à nouveau l'objet du serveur à partir de la nouvelle page.

  • Ou je pourrais stocker l'objet dans le stockage global comme le magasin redux. (Cet objet doit bientôt être retiré du magasin. Je pense donc que ce n'est peut-être pas bien de le mettre là en premier lieu)

reactjsreact-routerreact-redux
8
eugene

React Router utilise des objets location. L'une des propriétés d'un objet location est state.

this.props.router.Push({
  pathname: '/other-page',
  state: {
    id: 7,
    color: 'green'
  }
})

Sur la page dans laquelle vous naviguez, la location actuelle sera injectée dans le composant dont la route correspond, de sorte que vous pouvez accéder à l'état à l'aide de this.props.location.state.

Une chose à garder à l'esprit est qu'il n'y aura pas de state si un utilisateur accède directement à la page. Vous aurez donc toujours besoin d'un mécanisme pour charger les données quand elles n'existent pas.

36
Paul S

Passage des paramètres de requête lors de la navigation programmée dans le routeur de réaction

Les objets d'historique peuvent être utilisés par programme pour modifier l'emplacement actuel à l'aide de history.Push et history.replace.

    history.Push('/home?the=query', { some: 'state' })

Si nous transmettons l'objet d'historique à un composant en tant qu'accessoires. Ensuite, nous pouvons naviguer par programme en utilisant les méthodes de routeur de réaction disponibles sur l’objet historique.

Supposons maintenant que vous transmettez l'objet d'historique en tant qu'application appelée "routeur". Donc, il serait référencé à l'intérieur d'un composant avec une syntaxe basée sur la classe comme: 

this.props.router

Lorsque vous utilisez Push ou remplace, vous pouvez spécifier le chemin et l'état de l'URL en tant qu'arguments séparés ou tout inclure dans un seul objet de type emplacement comme premier argument.

this.props.router.Push('/some/path?the=query')

Ou vous pouvez utiliser un seul objet semblable à l'emplacement pour spécifier l'URL et l'état. Ceci est équivalent à l'exemple ci-dessus.

this.props.router.Push({
  pathname: '/some/path',  //path
  search: '?the=query' // query param named 'search'
})

Note - Bien sûr, assurez-vous que this.props.router est bien l’objet historique de l’API de react-router.

1
therewillbecode

Je n'ai pas réussi à le faire fonctionner avec react-router v4 +. Mais ce qui suit fonctionne:

//I.e. add navigate using the history stack and pass context as the 2nd parameter
this.props.history.Push('/takeTest', 
    {
      subjectsList: this.props.subjectsList.filter((f)=>f.isChecked===true)
    })
0
Richard Strickland

Je ne sais pas quelle version vous utilisez mais vous pouvez donner à objet comme paramètre pour react-router:

let {router} = this.props;
router.Push({pathname: "/newpath", query: {id: 1}) // will create the url /newpath?id=1
0
cubbuk