Quelle est la meilleure façon de rediriger une page en utilisant React Router ?

Question

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

1. Utilisation de browserHistory.push("/path")

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

2. Utilisation de 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") y this.props.history.push("/path") . Détails : Comment pousser vers l'historique dans React Router v4 ?

Je suis tellement confus par toutes ces options, y a-t-il une meilleure façon de rediriger une page ?

Answer 1

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

1) Vous voulez protéger votre route contre les utilisateurs non autorisés.

Si c'est le cas, vous pouvez utiliser le composant appelé <Redirect /> et peut mettre en œuvre 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>
}

Gardez à l'esprit que si vous voulez <Redirect /> pour qu'il 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 effectuer une redirection 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)
    })

o

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

Afin d'avoir accès à l'historique, vous pouvez envelopper votre composant avec un HOC appelé withRouter . Lorsque vous enveloppez votre composant avec elle, elle passe match location y history accessoires. Pour plus de détails, veuillez consulter la documentation officielle de l'application avecRouter .

Si votre composant est l'enfant d'un <Route /> c'est-à-dire si c'est quelque chose comme <Route path='/path' component={myComponent} /> vous n'avez pas besoin d'envelopper votre composant avec withRouter parce que <Route /> passe match , location y history à son enfant.

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

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

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

ou vous pouvez utiliser un <Link /> composant :

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

Je pense que la règle générale dans ce cas est d'essayer d'utiliser <Link /> d'abord, je suppose, surtout en raison des performances.

Answer 2

Vous pouvez également utiliser la bibliothèque react router dom useHistory ;

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

https://reactrouter.com/web/api/Hooks/usehistory

Answer 3

Maintenant avec react-router v15.1 et ensuite nous pouvons useHistory Crochet, C'est super simple et clair. Voici un exemple simple tiré du blog source.

import { useHistory } from "react-router-dom";

function BackButton({ children }) {
  let history = useHistory()
  return (
    <button type="button" onClick={() => history.goBack()}>
      {children}
    </button>
  )
}

Vous pouvez l'utiliser dans n'importe quel composant fonctionnel et crochets personnalisés. Et oui, cela ne fonctionnera pas avec les composants de classe, comme tout autre crochet.

Pour en savoir plus, cliquez ici https://reacttraining.com/blog/react-router-v5-1/#usehistory

Answer 4

Vous pouvez également Redirect au sein de la Route comme suit. Ceci est pour gérer les routes invalides.

<Route path='*' render={() => 
     (
       <Redirect to="/error"/>
     )
}/>

Answer 5

L'un des moyens les plus simples : utiliser Link comme suit :

import { Link } from 'react-router-dom';

<Link to={`your-path`} activeClassName="current">{your-link-name}</Link>

Si nous voulons couvrir toute la section div comme lien :

 <div>
     <Card as={Link} to={'path-name'}>
         .... 
           card content here
         ....
     </Card>
 </div>