Wie navigiere ich programmgesteuert im React Router, ohne die Renderfunktion zu ändern?

Programmgesteuertes Navigieren mit React-Router

Herausforderung:

In Ihrer React-Anwendung möchten Sie programmgesteuert zu einem navigieren unterschiedliche Route basierend auf dem Anmeldestatus des Benutzers. Sie sind sich nicht sicher, wie Sie dies erreichen können, ohne die Renderfunktion zu ändern.

Lösung für React-Router v4:

Verwendung von Verlaufsobjekten:

Verpacken Sie Ihre Komponente mit withRouter und nutzen Sie die Methode „history.push“ von props. Dieser Ansatz ist nützlich, wenn Ihre Komponente Routing-Requisiten akzeptiert oder nicht direkt mit dem Router verbunden ist.

import { withRouter } from 'react-router';

class App extends React.Component {
...
componentDidMount() {
// Check user login status
if (isLoggedIn) {
// Redirect to home route
this.props.history.push('/home');
}
}
render() {
// Render login component
return <Login />;
}
}

export default withRouter(App);

Umleitung verwenden:

Für einfachere Szenarien können Sie dies tun Verwenden Sie Redirect.

import { withRouter } from 'react-router';

class App extends React.Component {
...
render() {
// If user is logged in, redirect to home route
if (isLoggedIn) {
return <Redirect to="/home" />;
}
// Render login component
return <Login />;
}
}

Lösung für React-Router v2/v3:

Router-Kontext verwenden:

Umschließen Sie Ihre Komponente und greifen Sie auf den Router-Kontext zu, um Routen dynamisch zu ändern.

import React from 'react';

class App extends React.Component {
...
render() {
// Check user login status
if (isLoggedIn) {
// Change route using router context
this.context.router.push('/home');
}
// Render login component
return <Login />;
}
}

App.contextTypes = {
router: React.PropTypes.object.isRequired
};
export default App;

Verwenden des Browserverlaufs:

Der direkte Zugriff auf den Browserverlauf kann ebenfalls ausgelöst werden Navigation.

import { browserHistory } from 'react-router';

// Redirect to specific path
browserHistory.push('/some/path');

Das obige ist der detaillierte Inhalt vonWie navigiere ich programmgesteuert im React Router, ohne die Renderfunktion zu ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!