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

React Router v6에서 클래스 구성 요소의 특정 경로로 프로그래밍 방식으로 리디렉션하려면 어떻게 해야 하나요?

문제:

React Router v6의 클래스 구성 요소에서 프로그래밍 방식으로 다른 경로로 리디렉션하려고 하면 다음 오류가 발생할 수 있습니다.

TypeError: Cannot read properties of undefined (reading 'push')

이 오류는 v6의 클래스 구성 요소에서 탐색 속성을 사용할 수 없기 때문에 발생합니다. . 대신 기능 구성요소에만 액세스할 수 있습니다.

해결책:

이 문제를 해결하는 방법에는 두 가지가 있습니다.

1. 클래스 구성 요소를 함수 구성 요소로 변환:

   • 후크(예: useState, useEffect 및 useNavigate)를 사용하여 AddContacts 클래스 구성 요소를 기능 구성 요소로 변환합니다.

2. Router HOC를 사용하여 사용자 정의 만들기:

   • navigation prop 및 기타 항목을 주입하는 withRouter라는 HOC(Higher Order Component)를 만듭니다. React Router는 래핑된 구성 요소에 연결됩니다.
   • 다음과 같은 방법으로 withRouter HOC로 AddContacts 구성 요소를 장식합니다.

import withRouter from './withRouter'; // Change this to the path of your custom HOC file

export default withRouter(AddContacts);

이것은 탐색 기능을 제공합니다. AddContacts 구성 요소에 추가합니다.

추가 참고 사항:

React Router v6에서 탐색 기능은 더 이상 객체가 아니라 대상 경로를 다음과 같이 취하는 함수입니다. 첫 번째 인수와 선택적 옵션 개체를 두 번째 인수로 사용합니다.

interface NavigateFunction {
  (
    to: To,
    options?: { replace?: boolean; state?: State }
  ): void;
  (delta: number): void;
}

이는 탐색 구문도 변경되었음을 의미합니다. Navigate를 사용하여 경로를 탐색하려면 다음과 같이 함수를 호출하세요.

// Example usage
this.props.navigate("/");

위 솔루션 중 하나를 따르면 프로그래밍 방식으로 React Router v6의 다른 경로로 리디렉션할 수 있습니다.

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