webentwicklung-frage-antwort-db.com.de

Programmgesteuertes Navigieren in React-Router v4

Wie kann ich zu einer neuen Seite wechseln, nachdem eine Überprüfung mit React Router V4 erfolgt ist? Ich habe so etwas:

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

Ich möchte den Benutzer auf eine andere Route schicken. Ich habe mir Redirect angesehen, aber es scheint, als würde die aktuelle Seite aus der Historie gelöscht, die ich nicht möchte.

6
ocram

Sie verwenden Reakt-Router v4 , so dass Sie mit Ihrer Komponente withRouter verwenden müssen, um auf die Eigenschaften des Verlaufsobjekts zuzugreifen. Verwenden Sie anschließend history.Push, um die Route dynamisch zu ändern. 

withRouter :

Sie können auf die Eigenschaften des Verlaufsobjekts und die Entsprechung Am nächsten zugreifen, indem Sie die Komponente withRouter höherer Ordnung verwenden. withRouter wird seine Komponente jedes Mal neu rendern, wenn sich die Route mit den gleichen Requisiten ändert wie Render-Requisiten: {match, location, history}.

So was:

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

Je nachdem, wie sich Ihre Umleitung verhalten soll, gibt es mehrere Optionen: React router docs

Komponente umleiten

Beim Rendern von wird zu einem neuen Ort navigiert. Der neue Speicherort überschreibt den aktuellen Speicherort im Protokollstapel, wie dies serverseitige Weiterleitungen (HTTP 3xx) tun.

to: string - Die URL, an die weitergeleitet werden soll.
to: object - Ein Ort, an den weitergeleitet werden soll.
Push: bool - Wenn true, wird beim Umleiten ein neuer Eintrag in den Verlauf eingefügt, anstatt den aktuellen zu ersetzen. 

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

Verwendung von withRouter HoC

Diese Komponente höherer Ordnung injiziert die gleichen Requisiten wie die Route. Es beinhaltet jedoch die Einschränkung, dass pro Datei nur 1 HoC verfügbar sein kann.

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

Wenn Sie TypeScript verwenden, wird Ihre Komponente mithilfe von React.Component<RouteComponentProps> erweitert, um this.props.history.Push ordnungsgemäß abzurufen

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

Sie können eine withRouter - Komponente höherer Ordnung verwenden, die history object als Eigenschaft einfügt. Dann können Sie mit history.Push eine Umleitung vornehmen:

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

Um eine Umleitung vorzunehmen, können Sie in einigen Fällen auch <Redirect to="/someURL" /> verwenden, aber diese Komponente muss gerendert sein, daher müssen Sie sie irgendwo in JSX verwenden.

0