web-dev-qa-db-fra.com

Quel est le meilleur moyen de rediriger une page à l'aide de React Router?

Je suis nouveau sur React Router et apprends qu'il y a tant de façons de rediriger une page:

  1. Utiliser browserHistory.Push("/path")

    import { browserHistory } from 'react-router';
//do something...
browserHistory.Push("/path");

  2. Utiliser this.context.router.Push("/path")

    class Foo extends React.Component {
    constructor(props, context) {
        super(props, context);
        //do something...
    }
    redirect() {
        this.context.router.Push("/path")
    }
}

Foo.contextTypes = {
    router: React.PropTypes.object
}

  3. Dans React Router v4, il y a this.context.history.Push("/path") et this.props.history.Push("/path"). Détails: Comment accéder à l'historique dans React Router v4?

Je suis tellement confus par toutes ces options, existe-t-il un meilleur moyen de rediriger une page?

reactjsreduxreact-router
60
Liutong Chen

En fait, cela dépend de votre cas d'utilisation

1) Vous souhaitez protéger votre itinéraire des utilisateurs non autorisés

Si tel est le cas, vous pouvez utiliser le composant appelé <Redirect /> et implémenter la logique suivante:

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

const ProtectedComponent = () => {
 if (authFails)
    return <Redirect to='/login'  />
}
return <div> My Protected Component </div>
}

Mais gardez à l'esprit que si vous voulez que <Redirect /> fonctionne comme vous le souhaitez, vous devez le placer à l'intérieur de la méthode de rendu de votre composant afin qu'il soit éventuellement considéré comme un élément DOM, sinon cela ne fonctionnera pas.

2) Vous souhaitez rediriger après une certaine action (disons après la création d'un élément)

Dans ce cas, vous pouvez utiliser l'historique

myFunction() {
 addSomeStuff(data).then(() => {
      this.props.history.Push('/path')
    }).catch((error) => {
      console.log(error)
    })

ou

myFunction() {
 addSomeStuff()
 this.props.history.Push('/path')
}

Pour avoir accès à l'historique, vous pouvez envelopper votre composant avec un HOC appelé withRouter lorsque vous l'enveloppez, il transmet matchlocation et history accessoires. Pour plus de détails, veuillez consulter la documentation officielle sur withRouter

Si votre composant est un enfant de <Route /> composant, je veux dire, si c'est quelque chose comme <Route path='/path' component={myComponent} /> vous n'avez pas à envelopper votre composant avec withRouter<Route /> passe matchlocation et history à son enfant.

3) Rediriger après avoir cliqué sur un élément

Il y a deux options ici. Vous pouvez utiliser history.Push() en le transmettant à un événement onClick.

<div onClick={this.props.history.Push('/path')}> some stuff </div>

ou vous pouvez utiliser le composant <Link />

 `<Link to='/path' > some stuff </Link>`

Je pense que la règle de base dans ce cas est (je suppose surtout parce que l’utilisation de la performance) essaie d’utiliser <Link /> first

105
Cagri Yardimci