React Router v6에서 \"[PrivateRoute]는 구성 요소가 아닙니다\" 오류가 발생하는 이유는 무엇입니까?

React Router v6 오류: [PrivateRoute]는 가 아닙니다. 구성 요소

React Router v6을 사용하고 개인 경로를 생성할 때 개발자는 "[PrivateRoute]는 구성 요소가 아닙니다. 의 모든 구성 요소 하위 항목은 다음과 같은 오류가 발생할 수 있습니다. a 또는 "

문제의 원인

이 오류는 "PrivateRoute" 구성 요소가 제대로 렌더링되지 않을 때 발생합니다. ""의 하위 항목으로 "" 내의 구성요소 component.

솔루션

이 문제를 해결하려면 아래와 같이 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>

이 수정된 코드에서:

• PrivateRoute는 Route 내에 중첩되어 있으며 이는 Routes 내에 중첩되어 있습니다.
• PrivateRoute 구성 요소는 인증을 결정하고 표시합니다. 승인된 경우 Outlet 구성 요소(하위 요소).
• 승인되지 않은 경우 PrivateRoute는 로그인 페이지로 이동합니다.

위 내용은 React Router v6에서 \"[PrivateRoute]는 구성 요소가 아닙니다\" 오류가 발생하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!