web-dev-qa-db-fra.com

Navigation par programme dans React-Router v4

Comment puis-je passer à une nouvelle page après une validation avec React Router V4? J'ai quelque chose comme ça:

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

Je voudrais envoyer l'utilisateur à un autre itinéraire. J'ai jeté un œil à Redirect, mais il semble que cela effacerait la page actuelle de l'historique, ce que je ne veux pas.

reactjsreact-routerreact-router-v4
6
ocram

Vous utilisez react-router v4 , vous devez donc utiliser withRouter avec votre composant pour accéder aux propriétés de l’historique, puis utiliser history.Push pour modifier l’itinéraire de manière dynamique. 

withRouter :

Vous pouvez accéder aux propriétés de l’historique et à la correspondance la plus proche avec Via le composant d’ordre supérieur withRouter. withRouter refera le rendu de son composant à chaque fois que la route change avec les mêmes accessoires que les accessoires de rendu: {match, location, history}.

Comme ça:

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);
11
Mayank Shukla

Selon le comportement de votre redirection, plusieurs options s'offrent à vous: Réagir à la documentation du routeur

composant de redirection

Rendre un va naviguer vers un nouvel emplacement. Le nouvel emplacement remplacera l'emplacement actuel dans la pile d'historique, comme le font les redirections côté serveur (HTTP 3xx).

to: string - L'URL vers laquelle rediriger.
to: object - Un emplacement vers lequel rediriger.
Push: bool - Lorsque la valeur est true, la redirection insère une nouvelle entrée dans l'historique au lieu de remplacer celle en cours. 

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

Utilisation de withRouter HoC

Ce composant d'ordre supérieur injectera les mêmes accessoires que Route. Cependant, la limitation est que vous ne pouvez avoir qu’un seul HoC par fichier.

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

Si vous utilisez TypeScript étend votre composant en utilisant React.Component<RouteComponentProps> pour obtenir this.props.history.Push correctement

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)
0
ktutnik

Vous pouvez utiliser withRouter composant d'ordre supérieur qui injectera l'objet history en tant que propriété. Ensuite, vous pouvez utiliser history.Push pour effectuer la redirection:

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

Pour effectuer la redirection, vous pouvez également utiliser <Redirect to="/someURL" /> dans certains cas, mais ce composant doit être render et vous devez donc l'utiliser quelque part dans JSX.

0
Bartek Fryzowicz