Comment naviguer par programme dans React Router ?

Naviguer par programmation à l'aide de React-Router

Problème :

Dans une application React, vous besoin de modifier l'itinéraire par programme en fonction d'une condition (par exemple, vérifier si un utilisateur est connecté). Cependant, vous ne pouvez pas modifier l'état directement dans la fonction de rendu.

Solution :

Pour y parvenir, plusieurs stratégies peuvent être utilisées, selon la version de React-Router utilisé :

React-Router v4 :

• Utilisez le composant d'ordre supérieur (HOC) withRouter pour envelopper le composant cible.
• Utilisez la méthode history.push dans les méthodes de cycle de vie du composant ComponentDidMount ou ComponentWillReceiveProps. pour naviguer vers un itinéraire différent.

React-Router v2 ou v3 :

• Utilisez le contexte de React pour accéder au routeur et modifiez l'itinéraire par programme à l'aide de context.router.push.
• Importez l'historique du navigateur depuis React-Router et utilisez l'historique du navigateur. pousser vers naviguer.

Mise en œuvre :

Utilisation de withRouter (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);

Utilisation de la redirection (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 />;
  }
}

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!