React Router v6에서 \'PrivateRoute는 \' 오류를 수정하는 방법은 무엇입니까?

React Router v6: 개인 경로 구성 요소 오류

React Router v6에서 개인 경로를 정의할 때 오류가 발생합니다. 오류 메시지에는 PrivateRoute 구성 요소가 또는 요소. 이 문제는 개인 경로가 잘못 구현되었을 때 발생합니다.

해결 방법

PrivateRoute.js에서 코드를 다음으로 바꾸세요.

<code class="javascript">import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoute = () => {
  const isAuthenticated = false; // Replace with your authentication logic

  return isAuthenticated ? <Outlet /> : <Navigate to="/home" />;
};

export default PrivateRoute;</code>

route.js에서 다음과 같이 코드를 업데이트합니다.

<code class="javascript">...
<PrivateRoute exact path="/">
  <Route exact path="/" element={<Dashboard />} />
</PrivateRoute>
<Route exact path="/home" element={<Home />} /></code>

설명

이제 PrivateRoute 구성 요소는 승인되면 경로의 하위 항목을 렌더링할 수 있는 구성 요소입니다. <탐색> 구성 요소는 인증되지 않은 사용자를 특정 페이지로 리디렉션하는 데 사용됩니다.

App.js에서 경로를 구성 요소를 사용하고 요소 prop을 사용하여 개인 경로를 지정합니다.

추가 참고 사항

• isAuthenticated 변수는 자체 인증 논리로 대체되어야 합니다.
• 인증되지 않은 사용자가 리디렉션되는 경로는 필요에 따라 맞춤 설정할 수 있습니다.
• 개인 경로가 여러 개인 경우 useAuth 컨텍스트 후크를 사용하여 애플리케이션 전체에서 인증 상태를 공유할 수 있습니다.

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