reactjs - example - redireccionar react

¿Cuál es la mejor manera de redirigir una página usando React Router?

Question

Soy nuevo en React Router y descubro que hay muchas maneras de redirigir una página:

1. Usando browserHistory.push("/path")

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

2. Usando 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. En React Router v4, hay this.context.history.push("/path") y this.props.history.push("/path") . Detalles: ¿Cómo pasar a Historial en React Router v4?

Estoy tan confundido con todas estas opciones, ¿hay una mejor manera de redirigir una página?

Answer 1

En realidad depende de tu caso de uso

1) Desea proteger su ruta de usuarios no autorizados

Si ese es el caso, puede usar el componente llamado <Redirect /> y puede implementar la siguiente 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>
}

Pero tenga en cuenta que, si desea que <Redirect /> funcione de la manera esperada, debe colocarlo dentro del método de representación de su componente para que eventualmente se considere como un elemento DOM, de lo contrario no funcionará.

2) Desea redirigir después de una determinada acción (digamos después de crear un elemento)

En ese caso puedes usar el historial

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

o

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

Para tener acceso al historial, puede ajustar su componente con un HOC llamado withRouter cuando withRouter su componente con él, pasa location accesorios de location e history . Para obtener más detalles, consulte la documentación oficial sobre withRouter

Si su componente es hijo del componente <Route /> , quiero decir que si es algo así como <Route path=''/path'' component={myComponent} /> no tiene que envolver su componente con <Route /> pasa la location match y el history a su hijo.

3) Redirigir después de hacer clic en algún elemento

Aquí hay dos opciones. Puede usar history.push() pasándolo a un evento onClick

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

o puede usar el componente <Link />

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

Creo que la regla de oro con este caso es (supongo especialmente debido al rendimiento) intentar usar <Link /> primero