\"오류: [PrivateRoute]는 구성 요소가 아닙니다. React Router v6에서 모든 구성 요소 하위 항목은 a 또는 \"이어야 합니까?

오류: [PrivateRoute]는 요소. 의 모든 구성 요소 하위 항목 이어야 합니다. 또는

React Router v6에서는 개인 경로 구성 요소가 유효한 경로 구성 요소가 아니라는 오류가 발생할 수 있습니다. 이는 개인 경로 구성 요소가 제대로 정의되거나 구성되지 않은 경우 발생합니다.

이 문제를 해결하려면 다음 단계를 따르세요.

PrivateRoute 구성 요소

PrivateRoute 구성 요소가 유효한 React Route 구성 요소. 귀하의 예에서는 PrivateRoute 구성 요소에 구문 오류가 있습니다.

const ele = authed === true ? element : <Navigate to=&quot;/Home&quot;  />;

="/Home" 뒤에 /를 바꿔야 합니다. 이중 닫는 꺾쇠 괄호 사용:

const ele = authed === true ? element : <Navigate to=&quot;/Home&quot; ></Navigate>;

경로 구성

경로 구성에서 개인 경로가 올바르게 정의되었는지 확인하세요. 귀하의 예에서는 다음과 같습니다.

<PrivateRoute exact path=&quot;/&quot; element={<Dashboard/>}/>

요소 prop에 닫는 꺾쇠 괄호가 없기 때문에 이는 작동하지 않습니다. 올바른 코드는 다음과 같습니다.

<PrivateRoute exact path=&quot;/&quot; element={<Dashboard />} />

또는 조건부 렌더링 접근 방식을 사용하는 등 다른 방법을 사용하여 개인 경로를 설정할 수 있습니다.

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

이 예에서는 PrivateRoute 구성 요소는 인증 상태에 따라 대시보드 구성 요소를 렌더링할지 여부를 결정합니다.

결론

PrivateRoute 구성 요소가 올바르게 정의되고 경로 구성이 올바른지 확인하면 문제를 해결할 수 있습니다. 오류 오류: [PrivateRoute]는 가 아닙니다. 요소. 의 모든 구성 요소 하위 항목 이어야 합니다. 또는

위 내용은 \"오류: [PrivateRoute]는 구성 요소가 아닙니다. React Router v6에서 모든 구성 요소 하위 항목은 a 또는 \"이어야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!