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>
}
Gardez à l'esprit que si vous voulez <Redirect />
travailler comme vous le souhaitez, vous devez le placer à l'intérieur de la méthode de rendu de votre composant afin qu'il soit finalement 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')
}
Afin d'avoir accès à l'historique, vous pouvez envelopper votre composant avec un HOC appelé withRouter
. Lorsque vous enveloppez votre composant avec, il passe match
location
et se history
propage. Pour plus de détails, veuillez consulter la documentation officielle de withRouter .
Si votre composant est un enfant d'un <Route />
composant, à savoir si elle est quelque chose comme <Route path='/path' component={myComponent} />
, vous ne devez pas envelopper votre composant avec withRouter
, parce que <Route />
laissez - passer match
, location
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 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 de base avec ce boîtier est d'essayer de l'utiliser en <Link />
premier, je suppose surtout à cause des performances.