Comment corriger le message d'erreur "All component children of <Routes> must be a <Route> or <React.Fragment>"
La librairie "React Router" est une librairie très utilisée dans le développement d'applications avec la librairie React. Elle ajoute un système de routage. Cela permet de naviguer dans un site ou une application. Elle est donc installée dès que l'application ou le site internet utilise plusieurs pages. Cette librairie a connu des changements majeurs lors de la sortie de la version 6. L'une d'entre elles est la gestion des composants "Routes". Le message d'erreur "All component children of "Routes" must be a "Route" or "React.Fragment" est lié à cette modification.
Comme il est indiqué dans le message, lorsque vous déclarez des routes dans une liste de routes avec le composant "Routes", vous êtes obligé d'utiliser un composant "Route" ou "React.Fragment". Si vous souhaitez créer un composant pour répondre à un besoin spécifique, par exemple une route privée, réservée aux utilisateurs authentifiés, vous allez devoir utiliser une balise "Route". Écrivez d'abord le code de votre route dans un fichier à part, par exemple "RoutePrivee.js".
import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
const PrivateRoute = () => {
const auth = null; // Variable qui va contenir le résultat de l'authentification
// Ici on effectue le traitement pour savoir si la personne est authentifiée
// Si on est authentifié, on affiche la route, sinon on renvoie à la page de connexion
return auth ? <Outlet /> : <Navigate to="/login" />;
}
Une fois que vous avez votre route prête, vous devez l'importer dans votre fichier "App.js" où vous aller déclarer vos routes. Le composant "Route" possède un attribut "element" qui permet d'indiquer que l'on souhaite afficher un composant spécifique avec cette route. Définissez alors votre composant "RoutePrivee", qui sera utilisé lorsqu'un utilisateur cliquera dessus.
import RoutePrivee from './components/routing/RoutePrivee';
const App = () => {
return (
<Router>
<Fragment>
<Navbar/>
<Routes>
<Route exact path='/' element={<RoutePrivee/>}>
</Routes>
</Fragment>
</Router>
);
}