React Router v6에서 \'[PrivateRoute]는 구성 요소가 아닙니다\' 오류를 수정하는 방법은 무엇입니까?

오류: [PrivateRoute]는 구성요소

이 오류는 React Router v6을 사용하고 비공개 경로를 생성하려고 할 때 발생합니다. PrivateRoute.js의 해당 코드는 Route 구성 요소를 반환하려고 시도하지만 그대로 내보내지지 않습니다.

해결책:

이 문제를 해결하려면 PrivateRoute를 수정하세요. .js 파일은 다음과 같습니다.

import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoute = () => {
    const auth = null; // determine if authorized, from context or however you're doing it

    // If authorized, return an outlet that will render child elements
    // If not, return element that will navigate to login page
    return auth ? <Outlet /> : <Navigate to="/login" />;
}

export default PrivateRoute;

App.js 파일에서 개인 경로가 다음과 같이 정의되었는지 확인합니다.

<Route exact path='/' element={<PrivateRoute />}>
  <Route exact path='/' element={<Home />} />
</Route>

이 수정된 코드는 PrivateRoute 구성 요소가 Route 구성 요소로 인식되며 개인 라우팅에 대해 제대로 작동합니다.

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