Soy nuevo en React Router y aprendí que hay muchas formas de redirigir una página:
Usando browserHistory.push("/path")
import { browserHistory } from 'react-router'; //do something... browserHistory.push("/path"); 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 } En React Router v4, está this.context.history.push("/path") y this.props.history.push("/path") . Detalles: ¿Cómo pasar al historial en React Router v4?
Estoy tan confundido por todas estas opciones, ¿hay una mejor manera de redirigir una página?
En realidad, depende de su caso de uso.
1) Quiere 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> } Tenga en cuenta que si desea que <Redirect /> funcione de la manera esperada, debe colocarlo dentro del método de renderizado de su componente para que finalmente se considere como un elemento DOM; de lo contrario, no funcionará.
2) Desea redirigir después de cierta 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 envolver su componente con un HOC llamado withRouter . Cuando envuelve su componente con él, pasa la location de la match y los accesorios del history . Para obtener más detalles, consulte la documentación oficial de withRouter .
Si su componente es hijo de un componente <Route /> , es decir, si es algo así como <Route path='/path' component={myComponent} /> , no tiene que envolver su componente con withRouter , porque <Route /> pasa match , location e 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 un componente <Link /> :
<Link to='/path' > some stuff </Link> Creo que la regla general en este caso es tratar de usar <Link /> primero, supongo que especialmente por el rendimiento.
También puede usar useHistory de la biblioteca dom del enrutador de reacción;
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> ); }Ahora, con react-router v15.1 y en adelante, podemos useHistory , esta es una forma súper simple y clara. Aquí hay un ejemplo simple del blog de origen.
import { useHistory } from "react-router-dom"; function BackButton({ children }) { let history = useHistory() return ( <button type="button" onClick={() => history.goBack()}> {children} </button> ) }Puede usar esto dentro de cualquier componente funcional y ganchos personalizados. Y sí, esto no funcionará con componentes de clase como cualquier otro gancho.
Obtenga más información sobre esto aquí https://reacttraining.com/blog/react-router-v5-1/#usehistory