React Router v6 오류: [PrivateRoute]는
React Router v6을 사용하고 개인 경로를 생성할 때 개발자는 "[PrivateRoute]는
문제의 원인
이 오류는 "PrivateRoute" 구성 요소가 제대로 렌더링되지 않을 때 발생합니다. "
솔루션
이 문제를 해결하려면 아래와 같이 PrivateRoute 구성 요소가 Routes 구성 요소 내 Route 구성 요소의 중첩된 하위 항목으로 정의되어 있는지 확인하세요.
<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>
이 수정된 코드에서:
위 내용은 React Router v6에서 \"[PrivateRoute]는 구성 요소가 아닙니다\" 오류가 발생하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!