Heim > Artikel > Web-Frontend > Warum erhalte ich in React Router v6 den Fehler „[PrivateRoute] ist keine Komponente“?
Router v6-Fehler reagieren: [PrivateRoute] ist keine
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
Ursprung des Problems
Dieser Fehler tritt auf, wenn die Komponente „PrivateRoute“ nicht ordnungsgemäß gerendert wird als Kind der „
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:
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!