Na verdade, depende do seu caso de uso.
1) Você deseja proteger sua rota de usuários não autorizados
Se for esse o caso, você pode usar o componente chamado <Redirect />
e pode implementar a seguinte lógica:
import React from 'react'
import { Redirect } from 'react-router-dom'
const ProtectedComponent = () => {
if (authFails)
return <Redirect to='/login' />
}
return <div> My Protected Component </div>
}
Lembre-se de que, se quiser <Redirect />
trabalhar da maneira esperada, você deve colocá-lo dentro do método de renderização do seu componente para que seja eventualmente considerado um elemento DOM, caso contrário, não funcionará.
2) Você deseja redirecionar após uma determinada ação (digamos, após criar um item)
Nesse caso, você pode usar o histórico:
myFunction() {
addSomeStuff(data).then(() => {
this.props.history.push('/path')
}).catch((error) => {
console.log(error)
})
ou
myFunction() {
addSomeStuff()
this.props.history.push('/path')
}
Para ter acesso ao histórico, você pode envolver seu componente com um HOC chamado withRouter
. Quando você envolve seu componente com ele, ele passa match
location
e history
adere. Para obter mais detalhes, consulte a documentação oficial do withRouter .
Se o componente é um filho de um <Route />
componente, ou seja, se é algo como <Route path='/path' component={myComponent} />
, você não tem que envolver seu componente com withRouter
, porque <Route />
passes match
, location
e history
ao seu filho.
3) Redirecionar após clicar em algum elemento
Existem duas opções aqui. Você pode usá- history.push()
lo passando para um onClick
evento:
<div onClick={this.props.history.push('/path')}> some stuff </div>
ou você pode usar um <Link />
componente:
<Link to='/path' > some stuff </Link>
Acho que a regra neste caso é tentar usar <Link />
primeiro, suponho que especialmente por causa do desempenho.