Maison > Article > interface Web > Comment gérer la redirection programmatique dans les composants de classe React Router v6 ?
La navigation programmatique dans React Router v6 présente un défi unique par rapport aux versions précédentes. Les composants de classe, qui étaient répandus dans les itérations précédentes, rencontrent un accessoire de navigation non défini, entraînant une TypeError.
React Router v6 a introduit un changement dans la stratégie de navigation, s'éloignant de l'utilisation directe de l'objet historique. Au lieu de cela, il utilise naviguer, une API fonctionnelle qui accepte un chemin cible et des options facultatives. Ce changement a eu un impact sur les composants de classe, où l'accessoire de navigation n'est plus automatiquement accessible.
Pour résoudre ce problème, il existe deux approches principales :
Création d'un composant d'ordre supérieur personnalisé avecRouter :
Si la conversion en composant de fonction n'est pas réalisable, vous pouvez créer un composant d'ordre supérieur (HOC) personnalisé qui injecte essentiellement l'accessoire de navigation dans le composant cible. Voici un exemple d'un tel HOC nommé withRouter :
<code class="js">const withRouter = WrappedComponent => props => { const navigate = useNavigate(); return ( <WrappedComponent {...props} navigate={navigate} /> ); };</code>
Une fois que vous avez créé le withRouter HOC, appliquez-le au composant de classe cible, Ajoutez des contacts, comme suit :
<code class="js">export default withRouter(AddContacts);</code>
Cela exposera l'accessoire de navigation au composant encapsulé, vous permettant d'effectuer navigation programmatique.
En plus du passage des composants de classe, React Router v6 a également introduit des modifications dans l'API de navigation. Au lieu de l'objet d'historique précédemment utilisé, vous devez maintenant appeler la fonction de navigation, en transmettant le chemin cible et tout état facultatif ou en remplaçant les indicateurs.
<code class="js">this.props.navigate("/");</code>
En implémentant l'une des solutions susmentionnées et en comprenant l'API de navigation mise à jour. , vous pouvez effectuer avec succès des redirections programmatiques à partir de composants de classe dans React Router v6.
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!