Comment naviguer par programme dans React Router v2, v3 et v4 ?

Navigation par programmation avec React-Router

Dans de nombreuses applications React, il peut y avoir des scénarios dans lesquels vous devez naviguer par programmation entre les itinéraires en fonction de certaines conditions, telles que l'authentification de l'utilisateur. . Voici comment y parvenir en utilisant React-Router.

React-Router v4

Dans React-Router v4, vous pouvez utiliser le composant d'ordre supérieur withRouter (HOC) pour accéder aux accessoires d'historique, y compris push() pour modifier les itinéraires par programme. Voici comment vous pouvez implémenter cela dans votre exemple :

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 />;
  }
}

export default withRouter(App);

react-router v2 ou v3

Dans les versions antérieures de react-router (v2 et v3), vous pouvez utiliser le contexte pour modifier routes, comme le montre l'exemple suivant :

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 />;
  }
}
export default App;

Approches alternatives avec React-Router v4

De plus, React-Router v4 fournit d'autres moyens de naviguer par programme :

• Redirection : Vous pouvez utiliser un composant de redirection pour rediriger les utilisateurs en fonction de conditions, comme on le voit dans ce qui suit exemple :

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' /> : <Login />}
    </Router>
  );
}
export default App;

• browserHistory.push(): Vous pouvez également utiliser directement la méthode browserHistory.push() pour modifier l'itinéraire par programme, comme indiqué dans l'exemple suivant :

import { browserHistory } from 'react-router';

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

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

Gardez à l'esprit que l'approche optimale pour votre application peut dépendre de votre exigences et base de code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!