Warum erhalte ich in React Router v6 den Fehler „[PrivateRoute] ist keine Komponente“?

Router v6-Fehler reagieren: [PrivateRoute] ist keine Komponente

Bei der Verwendung von React Router v6 und dem Erstellen privater Routen können Entwickler auf eine Fehlermeldung stoßen, die besagt: „[PrivateRoute] ist keine -Komponente. Alle untergeordneten Komponenten von müssen es sein.“ ein oder .“

Ursprung des Problems

Dieser Fehler tritt auf, wenn die Komponente „PrivateRoute“ nicht ordnungsgemäß gerendert wird als Kind der „“ Komponente innerhalb der „“ Komponente.

Lösung

Um dieses Problem zu beheben, stellen Sie sicher, dass die PrivateRoute-Komponente als verschachteltes untergeordnetes Element der Route-Komponente innerhalb der Routes-Komponente definiert ist, wie unten dargestellt:

<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>

In diesem überarbeiteten Code:

• PrivateRoute ist in Route verschachtelt, das wiederum in Routes verschachtelt ist.
• Die PrivateRoute-Komponente bestimmt die Autorisierung und zeigt sie an die Outlet-Komponente (untergeordnete Elemente), sofern autorisiert.
• Bei Nichtautorisierung navigiert PrivateRoute zu einer Anmeldeseite.

Das obige ist der detaillierte Inhalt vonWarum erhalte ich in React Router v6 den Fehler „[PrivateRoute] ist keine Komponente“?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!