reactjs - Navegación programática en React-Router v4

react-router-v4

Question

¿Cómo puedo pasar a una nueva página después de realizar una validación con React Router V4 ? Tengo algo como esto:

export class WelcomeForm extends Component {
handleSubmit = (e) => {
e.preventDefault()
if(this.validateForm())
// send to ''/life''
}
render() {
return (
<form className="WelcomeForm" onSubmit={this.handleSubmit}>
<input className="minutes" type="number" value={this.state.minutes} onChange={ (e) => this.handleChanges(e, "minutes")}/>
</form>
)
}
}

Me gustaría enviar al usuario a otra ruta. Eché un vistazo a Redirect pero parece que eliminaría la página actual del historial que no quiero.

Answer 1

Está utilizando react-router v4 , por lo que debe usar withRouter con su componente para acceder a las propiedades del objeto de historial, luego use history.push para cambiar la ruta dinámicamente.

withRouter :

Puede obtener acceso a las propiedades del objeto de historial y la coincidencia más cercana a través del componente de orden superior withRouter. withRouter volverá a representar su componente cada vez que la ruta cambie con los mismos accesorios que los accesorios de representación: {partido, ubicación, historial}.

Me gusta esto:

import {withRouter} from ''react-router-dom'';
class WelcomeForm extends Component {
handleSubmit = (e) => {
e.preventDefault()
if(this.validateForm())
this.props.history.push("/life");
}
render() {
return (
<form className="WelcomeForm" onSubmit={this.handleSubmit}>
<input className="minutes" type="number" value={this.state.minutes} onChange={ (e) => this.handleChanges(e, "minutes")}/>
</form>
)
}
}
export default withRouter(WelcomeForm);

Answer 2

Puede usar el componente de orden superior con withRouter que inyectará el objeto de history como propiedad. Luego puede usar history.push para hacer la redirección:

import { withRouter } from ''react-router-dom'';
...
class WelcomeForm extends Component {
handleSubmit = (e) => {
e.preventDefault()
if(this.validateForm())
this.props.history.push(''/life'');
}
render() {
return (
<form className="WelcomeForm" onSubmit={this.handleSubmit}>
<input className="minutes" type="number" value={this.state.minutes} onChange={ (e) => this.handleChanges(e, "minutes")}/>
</form>
)
}
}
export default withRouter(WelcomeForm);

Para realizar la redirección, también puede usar <Redirect to="/someURL" /> en algunos casos, pero este componente debe representarse, por lo que debe usarlo en algún lugar de JSX.

Answer 3

Si está usando TypeScript extiende su componente usando React.Component<RouteComponentProps> para obtener this.props.history.push correctamente

class YourComponent extends React.Component<RouteComponentProps> {
constructor(props: Readonly<RouteComponentProps>) {
super(props)
}
public render(){
// you can access history programmatically anywhere on this class
// this.props.history.push("/")
return (<div/>)
}
}
return default withRouter(YourComponent)

Answer 4

Dependiendo de cómo desea que se comporte su redirección, hay varias opciones: Reaccionar documentos del enrutador

Redirigir componente

La representación de a navegará a una nueva ubicación. La nueva ubicación anulará la ubicación actual en la pila del historial, como lo hacen las redirecciones del lado del servidor (HTTP 3xx).

to: string : la URL a la que se redirecciona.
to: object : una ubicación para redirigir a.
push: bool : cuando es verdadero, la redirección empujará una nueva entrada al historial en lugar de reemplazar la actual.

Ejemplo: <Redirect push to="/somewhere"/>

import { Route, Redirect } from ''react-router''
export class WelcomeForm extends Component {
handleSubmit = (e) => {
e.preventDefault()
if(this.validateForm())
<Redirect push to="/life"/>
}
render() {
return (
<form className="WelcomeForm" onSubmit={this.handleSubmit}>
<input className="minutes" type="number" value={this.state.minutes} onChange={ (e) => this.handleChanges(e, "minutes")}/>
</form>
)
}
}

Usar con withRouter HoC

Este componente de orden superior inyectará los mismos accesorios que Route. Sin embargo, conlleva la limitación de que solo puede tener 1 HoC por archivo.

import { withRouter } from ''react-router-dom''
export class WelcomeForm extends Component {
handleSubmit = (e) => {
e.preventDefault()
if(this.validateForm())
this.props.history.push("/life");
}
render() {
return (
<form className="WelcomeForm" onSubmit={this.handleSubmit}>
<input className="minutes" type="number" value={this.state.minutes} onChange={ (e) => this.handleChanges(e, "minutes")}/>
</form>
)
}
}