web-dev-qa-db-fra.com

réagir-router Redirect vs history.push

Je lisais des exemples react-router-redux et j’ai confondu.

import { Redirect } from 'react-router-dom'

...

<Redirect to='/login' /> 

et 

import { Push } from 'react-router-redux'

...

Push('/login')
9
tandav

Redirect

Le rendu d'un <Redirect> permet de naviguer vers un nouvel emplacement. Le nouvel emplacement sera override the current location in the history stack, comme le font les redirections côté serveur (HTTP 3xx).

alors que Histoire

Fonction Push Pushes a new entry onto the history stack

16
Revansiddh

Le composant <Redirect> remplacera par défaut l'emplacement actuel par un nouvel emplacement dans la pile d'historique, fonctionnant essentiellement comme une redirection côté serveur.

Mais il peut également être utilisé avec la propriété Push. Dans ce cas, il insère une nouvelle entrée dans la pile d'historique, en procédant de la même manière que history.Push.

En fait, le composant <Redirect> utilise les méthodes Push et replace d'historique derrière la scène. C'est juste un moyen de navigation plus réactif.

Donc, fondamentalement, vous avez deux façons de naviguer:

  1. Utilisez les history.Push et history.replace dans un composant (généralement encapsulé avec le HOC withRouter, afin de pouvoir accéder à l'objet location sans avoir à le transmettre du parent à l'enfant.

  2. Utilisez le composant <Redirect> avec ou sans la propriété Push, selon 

1
Marcos Abreu