Comment corriger l'erreur « PrivateRoute n'est pas une » dans React Router v6 ?

React Router v6 : Erreur avec le composant de route privée

Vous rencontrez une erreur lors de la définition de routes privées dans React Router v6. Le message d'erreur indique que le composant PrivateRoute n'est pas un composant ou composant. Ce problème survient lorsque les routes privées ne sont pas implémentées correctement.

Solution

Dans PrivateRoute.js, remplacez votre code par ce qui suit :

<code class="javascript">import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoute = () => {
  const isAuthenticated = false; // Replace with your authentication logic

  return isAuthenticated ? <Outlet /> : <Navigate to="/home" />;
};

export default PrivateRoute;</code>

Dans route.js, mettez à jour votre code comme suit :

<code class="javascript">...
<PrivateRoute exact path="/">
  <Route exact path="/" element={<Dashboard />} />
</PrivateRoute>
<Route exact path="/home" element={<Home />} /></code>

Explication

Le composant PrivateRoute utilise désormais le composant composant, qui permet aux enfants de la route d'être restitués lorsqu'ils sont autorisés. L'icône Le composant est utilisé pour rediriger l'utilisateur vers une page spécifique s'il n'est pas authentifié.

Dans App.js, assurez-vous d'envelopper vos itinéraires dans un composant et utilisez l'élément prop pour spécifier la route privée.

Notes supplémentaires

• La variable isAuthenticated doit être remplacée par votre propre logique d'authentification.
• Le chemin vers lequel les utilisateurs non authentifiés sont redirigés peut être personnalisé selon les besoins.
• Si vous disposez de plusieurs routes privées, vous pouvez utiliser le hook contextuel useAuth pour partager l'état d'authentification dans l'application.

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!