Comment naviguer par programme dans React Router en fonction de l'état de connexion ?

Naviguer par programmation à l'aide de React-Router

Lors de la création d'applications Web, il est souvent nécessaire de modifier l'itinéraire en fonction de certaines conditions. Dans ce scénario particulier, l'objectif est de modifier dynamiquement l'itinéraire selon que l'utilisateur est connecté ou non.

Solution utilisant withRouter et history.push

Pour React Router v4, une approche consiste à enveloppez le composant avec withRouter et utilisez la prop history.push pour naviguer par programme. Ceci est recommandé lorsque le composant n'est pas directement connecté au routeur.

import { withRouter } from 'react-router';

class App extends React.Component {
  componentDidMount() {
    if (isLoggedIn) {
      this.props.history.push('/home');
    }
  }
  render() {
    return <Login />;
  }
}
export default withRouter(App);

Solution utilisant la redirection

Une méthode alternative consiste à utiliser le composant Redirect. Cette option fonctionne en redirigeant immédiatement vers un chemin spécifique en fonction de la condition.

import { withRouter } from 'react-router';

class App extends React.Component {
  render() {
    if (isLoggedIn) {
      return <Redirect to="/home" />;
    }
    return <Login />;
  }
}
export default withRouter(App);

Solution pour React Router v2 ou v3

Pour React Router v2 ou v3, le contexte peut être utilisé pour dynamiquement changer l'itinéraire :

class App extends React.Component {
  render() {
    if (isLoggedIn) {
      this.context.router.push('/home');
    }
    return <Login />;
  }
}
App.contextTypes = {
  router: React.PropTypes.object.isRequired
};
export default App;

Solution supplémentaire pour React Router v3

De plus, pour React Router v3, le module browserHistory peut être importé pour réaliser une navigation programmatique :

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

En implémentant ces solutions, vous pouvez naviguer dynamiquement dans React Router en fonction de conditions spécifiques et améliorer l'expérience utilisateur en vous assurant que le bon les composants sont chargés et affichés.

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!