Rumah > Artikel > hujung hadapan web > Mengapa Saya Mendapat Ralat \"[PrivateRoute] is Not a Component\" dalam React Router v6?
Ralat React Router v6: [PrivateRoute] bukan
Apabila menggunakan React Router v6 dan mencipta laluan peribadi, pembangun mungkin menghadapi ralat yang menyatakan, "[PrivateRoute] bukan komponen
Asal Masalah
Ralat ini timbul apabila komponen "PrivateRoute" tidak diberikan dengan betul sebagai anak kepada "
Penyelesaian
Untuk menyelesaikan isu ini, pastikan komponen PrivateRoute ditakrifkan sebagai anak bersarang komponen Route dalam komponen Routes, seperti yang dilihat di bawah:
<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>
Dalam kod yang disemak ini:
Atas ialah kandungan terperinci Mengapa Saya Mendapat Ralat \"[PrivateRoute] is Not a Component\" dalam React Router v6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!