Wie navigiere ich programmgesteuert in React Router v2, v3 und v4?

Programmgesteuertes Navigieren mit React-Router

In vielen React-Anwendungen kann es Szenarien geben, in denen Sie basierend auf bestimmten Bedingungen, wie z. B. der Benutzerauthentifizierung, programmgesteuert zwischen Routen navigieren müssen . So können Sie dies mit React-Router erreichen.

React-Router v4

In React-Router V4 können Sie die withRouter Higher-Order Component (HOC) verwenden, um auf Verlaufs-Requisiten zuzugreifen. einschließlich push() zum programmgesteuerten Ändern von Routen. So können Sie dies in Ihrem Beispiel implementieren:

import { withRouter } from 'react-router';

class App extends React.Component {
  componentDidMount() {
    const isLoggedIn = // Get isLoggedIn from localStorage or API call

    if (isLoggedIn) {
      this.props.history.push('/home');
    }
  }

  render() {
    // Return login component
    return <login></login>;
  }
}

export default withRouter(App);

React-Router v2 oder V3

In früheren Versionen von React-Router (V2 und V3) können Sie den Kontext zum Ändern verwenden Routen, wie im folgenden Beispiel gezeigt:

import React, { Component } from 'react';
import { Router, Route, Link, browserHistory } from 'react-router';

class App extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object.isRequired,
  };

  render() {
    if (isLoggedIn) {
      this.context.router.push('/home');
    }
    // Return login component
    return <login></login>;
  }
}
export default App;

Alternative Ansätze mit React-Router v4

Darüber hinaus bietet React-Router v4 alternative Möglichkeiten zur programmgesteuerten Navigation:

• Umleiten: Sie können eine Umleitungskomponente verwenden, um Benutzer basierend auf Bedingungen umzuleiten. wie im Folgenden zu sehen ist Beispiel:

import { BrowserRouter as Router, Redirect } from 'react-router-dom';

function App() {
  const isLoggedIn = // Get isLoggedIn from localStorage or API call

  return (
    <router>
      {isLoggedIn ? <redirect to="/home"></redirect> : <login></login>}
    </router>
  );
}
export default App;

• browserHistory.push(): Sie können die Route auch direkt mit der Methode browserHistory.push() programmgesteuert ändern, wie in gezeigt das folgende Beispiel:

import { browserHistory } from 'react-router';

componentDidMount() {
  const isLoggedIn = // Get isLoggedIn from localStorage or API call

  if (isLoggedIn) {
    browserHistory.push('/home');
  }
}

Bedenken Sie, dass der optimale Ansatz für Ihre Anwendung von Ihren spezifischen Anforderungen und abhängen kann Codebasis.

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