React Router v6 클래스 구성 요소에서 프로그래밍 방식 리디렉션을 처리하는 방법은 무엇입니까?

문제 이해: React Router v6의 리디렉션

React Router v6의 프로그래밍 방식 탐색은 이전 버전에 비해 독특한 과제를 제시합니다. 이전 반복에서 만연했던 클래스 구성 요소는 정의되지 않은 탐색 속성을 만나 TypeError를 발생시킵니다.

문제 원인

React Router v6에서는 탐색 전략의 변화를 도입했습니다. 히스토리 객체를 직접 사용합니다. 대신 대상 경로와 선택적 옵션을 허용하는 기능적 API인 탐색을 사용합니다. 이 변경 사항은 탐색 소품에 더 이상 자동으로 액세스할 수 없는 클래스 구성 요소에 영향을 미쳤습니다.

문제 해결

이 문제를 해결하려면 두 가지 주요 접근 방식이 있습니다.

1. 클래스 구성요소를 함수 구성요소로 변환:
   이 접근 방식에는 클래스 구성요소를 함수 구성요소로 변환하는 방법이 포함되며, 이를 통해 useNavigate를 포함하여 React-router-dom의 후크를 직접 사용할 수 있습니다.

2. Router Higher-Order Component를 사용하여 사용자 정의 만들기:
   함수 구성 요소로 변환하는 것이 불가능할 경우 기본적으로 탐색을 삽입하는 사용자 정의 Higher-Order Component(HOC)를 만들 수 있습니다. 대상 구성요소에 소품을 추가합니다. 다음은 withRouter라는 HOC의 예입니다:

   <code class="js">const withRouter = WrappedComponent => props => {
     const navigate = useNavigate();
     return (
       <WrappedComponent
         {...props}
         navigate={navigate}
       />
     );
   };</code>

솔루션 구현

withRouter HOC를 생성한 후 이를 대상 클래스 구성 요소에 적용합니다. AddContacts는 다음과 같습니다.

<code class="js">export default withRouter(AddContacts);</code>

이렇게 하면 탐색 속성이 래핑된 구성 요소에 노출되어 프로그래밍 방식 탐색을 수행할 수 있습니다.

Navigation API 변경 사항

추가로 클래스 구성 요소에서 전환하면서 React Router v6은 탐색 API에도 변경 사항을 도입했습니다. 이전에 사용된 기록 개체 대신 이제 탐색 기능을 호출하여 대상 경로와 선택적 상태를 전달하거나 플래그를 교체해야 합니다.

<code class="js">this.props.navigate("/");</code>

앞서 언급한 솔루션 중 하나를 구현하고 업데이트된 탐색 API를 이해함으로써 , React Router v6의 클래스 구성 요소에서 프로그래밍 방식 리디렉션을 성공적으로 수행할 수 있습니다.

위 내용은 React Router v6 클래스 구성 요소에서 프로그래밍 방식 리디렉션을 처리하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!