Wie navigiere ich programmgesteuert im React Router?

Programmgesteuerte Navigation mit React-Router

Problem:

In einer React-Anwendung haben Sie Sie müssen die Route basierend auf einer Bedingung programmgesteuert ändern (z. B. prüfen, ob ein Benutzer angemeldet ist). Sie können den Status jedoch nicht direkt in der Renderfunktion ändern.

Lösung:

Um dies zu erreichen, können je nach Version von mehrere Strategien angewendet werden Verwendeter React-Router:

React-Router v4:

• Verwenden Sie die withRouter Higher-Order Component (HOC), um die Zielkomponente zu umschließen.
• Verwenden Sie die Methode „history.push“ innerhalb der Lebenszyklusmethoden „componentDidMount“ oder „componentWillReceiveProps“. um zu einem anderen zu navigieren Route.

React-Router v2 oder v3:

• Verwenden Sie den Kontext von React, um auf den Router zuzugreifen und die Route programmgesteuert mit context.router zu ändern. push.
• BrowserHistory vom React-Router importieren und browserHistory.push verwenden navigieren.

Implementierung:

Verwendung mit Router (React-Router v4):

import { withRouter } from 'react-router';

class App extends React.Component {
  componentDidMount() {
    // Check if the user is logged in
    if (isLoggedIn) {
      // Navigate to the home page using history.push
      this.props.history.push('/home');
    }
  }

  render() {
    // Display the login component if the user is not logged in
    return <Login />;
  }
}

export default withRouter(App);

Verwendung von Redirect (React-Router v4 ):

class App extends React.Component {
  render() {
    if (isLoggedIn) {
      // Redirect to the home page using <Redirect>
      return <Redirect to="/home" />;
    }
    // Display the login component if the user is not logged in
    return <Login />;
  }
}

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