Comment naviguer par programme dans React Router sans modifier la fonction de rendu ?

Naviguer par programmation avec React-Router

Défi :

Dans votre application React, vous souhaitez naviguer par programmation vers un itinéraire différent en fonction du statut de connexion de l'utilisateur. Vous ne savez pas comment y parvenir sans modifier la fonction de rendu.

Solution pour React-Router v4 :

Utilisation d'objets d'historique :

Enveloppez votre composant avec withRouter et exploitez la méthode history.push à partir des accessoires. Cette approche est utile lorsque votre composant accepte les accessoires de routage ou n'est pas directement lié au routeur.

import { withRouter } from 'react-router';

class App extends React.Component {
...
componentDidMount() {
// Check user login status
if (isLoggedIn) {
// Redirect to home route
this.props.history.push('/home');
}
}
render() {
// Render login component
return <Login />;
}
}

export default withRouter(App);

Utilisation de la redirection :

Pour des scénarios plus simples, vous pouvez utilisez Redirect.

import { withRouter } from 'react-router';

class App extends React.Component {
...
render() {
// If user is logged in, redirect to home route
if (isLoggedIn) {
return <Redirect to="/home" />;
}
// Render login component
return <Login />;
}
}

Solution pour React-Router v2/v3 :

Utilisation du contexte du routeur :

Enveloppez votre composant et accédez au contexte du routeur pour modifier dynamiquement les itinéraires.

import React from 'react';

class App extends React.Component {
...
render() {
// Check user login status
if (isLoggedIn) {
// Change route using router context
this.context.router.push('/home');
}
// Render login component
return <Login />;
}
}

App.contextTypes = {
router: React.PropTypes.object.isRequired
};
export default App;

Utilisation de l'historique du navigateur :

L'accès direct à l'historique du navigateur peut également déclencher navigation.

import { browserHistory } from 'react-router';

// Redirect to specific path
browserHistory.push('/some/path');

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!