Comment corriger \"Erreur : [PrivateRoute] n'est pas un composant. Tous les enfants de composants doivent être un ou \" dans React Router v6 ?

Erreur : [PrivateRoute] n'est pas un composant. Tous les enfants de composants de doit être un ou

Dans React Router v6, vous pouvez rencontrer une erreur indiquant qu'un composant de route privée n'est pas un composant de route valide. Cela se produit lorsque votre composant de route privée n'est pas correctement défini ou configuré.

Pour résoudre ce problème, suivez ces étapes :

Composant PrivateRoute

Assurez-vous que votre composant PrivateRoute est un composant React Route valide. Dans votre exemple, vous avez une erreur de syntaxe dans le composant PrivateRoute :

const ele = authed === true ? element : <Navigate to=&quot;/Home&quot;  />;

Vous devez remplacer le / après par ="/Home" avec une double équerre de fermeture :

const ele = authed === true ? element : <Navigate to=&quot;/Home&quot; ></Navigate>;

Configuration de l'itinéraire

Dans votre configuration d'itinéraire, assurez-vous que l'itinéraire privé est bien défini. Dans votre exemple, vous avez :

<PrivateRoute exact path=&quot;/&quot; element={<Dashboard/>}/>

Cela ne fonctionnera pas car il vous manque un équerre de fermeture dans l'élément prop. Le code correct est :

<PrivateRoute exact path=&quot;/&quot; element={<Dashboard />} />

Vous pouvez également utiliser une méthode différente pour configurer votre itinéraire privé, par exemple en utilisant une approche de rendu conditionnel :

<Route exact path='/' element={<PrivateRoute/>}>
  <Route exact path='/' element={<Dashboard/>}/>
</Route>

Dans cet exemple, le composant PrivateRoute déterminera s'il faut restituer le composant du tableau de bord en fonction de l'état d'authentification.

Conclusion

En vous assurant que votre composant PrivateRoute est correctement défini et que la configuration de votre itinéraire est correcte, vous pouvez résoudre l'erreur Erreur : [PrivateRoute] n'est pas un composant. Tous les enfants de composants de doit être un ou .

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!