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>
            )
        }
    }