Pourquoi est-ce que j'obtiens l'erreur « [PrivateRoute] n'est pas un composant » dans React Router v6 ?

Erreur React Router v6 : [PrivateRoute] n'est pas un Composant

Lors de l'utilisation de React Router v6 et de la création de routes privées, les développeurs peuvent rencontrer une erreur indiquant : "[PrivateRoute] n'est pas un composant . Tous les enfants de composants de doivent être a ou ."

Origine du problème

Cette erreur survient lorsque le composant "PrivateRoute" n'est pas correctement rendu. en tant qu'enfant de la "" composant dans le "" composant.

Solution

Pour résoudre ce problème, assurez-vous que le composant PrivateRoute est défini comme un enfant imbriqué du composant Route dans le composant Routes, comme indiqué ci-dessous :

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

const PrivateRoute = () => {
  const auth = null; // Determine if authorized

  // Return outlet if authorized, navigate to login otherwise
  return auth ? <Outlet /> : <Navigate to="/login" />;
};

// App.js
import React, { Fragment } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Navbar from "./components/layout/Navbar";
import Home from "./components/pages/Home";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";
import PrivateRoute from "./components/routing/PrivateRoute";

const App = () => {
  return (
    <Router>
      <Fragment>
        <Navbar />
        <Routes>
          <Route exact path="/" element={<PrivateRoute />}>
            <Route exact path="/" element={<Home />} />
          </Route>
          <Route exact path="/register" element={<Register />} />
          <Route exact path="/login" element={<Login />} />
        </Routes>
      </Fragment>
    </Router>
  );
};</code>

Dans ce code révisé :

• PrivateRoute est imbriqué dans Route, qui est à son tour imbriqué dans Routes.
• Le composant PrivateRoute détermine l'autorisation et affiche le composant Outlet (éléments enfants) s'il est autorisé.
• En cas d'autorisation, PrivateRoute accède à une page de connexion.

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!