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

React Router v6에서 프로그래밍 방식으로 경로를 리디렉션할 때 발생하는 문제

문제

TypeError 발생: 정의되지 않은 속성을 읽을 수 없음('push' 읽기) ) 클래스 컴포넌트에서 useNavigate 후크를 사용하여 탐색을 시도하는 동안

원인

React Router v6에서 useNavigate는 함수 컴포넌트와만 호환됩니다. 클래스 구성 요소(AddContacts)에서 사용하려고 하면 정의되지 않은 상태로 유지되어 오류가 발생합니다.

해결 방법

이 문제를 해결하려면 다음 두 가지 옵션이 있습니다.

1. AddContacts를 함수 구성 요소로 변환

AddContacts 클래스 구성 요소를 함수 구성 요소로 리팩터링합니다. 이렇게 하면 함수 내에서 직접 useNavigate 후크를 사용할 수 있습니다.

2. Custom withRouter HOC(Higher Order Component) 사용

useNavigate를 포함한 경로 props를 AddContacts 구성 요소에 삽입하기 위해 사용자 정의 withRouter HOC를 생성합니다.

다음은Router HOC를 사용한 사용자 정의 예시입니다.

const withRouter = (WrappedComponent) => (props) => {
  const navigate = useNavigate();

  return (
    <WrappedComponent
      {...props}
      navigate={navigate}
    />
  );
};

그런 다음 AddContacts 구성 요소를 HOC로 장식합니다.

export default withRouter(AddContacts);

이렇게 하면 탐색 속성이 AddContacts 구성 요소에 전달되어 예상대로 사용할 수 있습니다.

Navigation API 변경 참고사항

React Router v6에서는 Navigation API가 변경되었습니다. 기록 개체는 더 이상 직접 사용되지 않습니다. 대신 하나 또는 두 개의 인수, 즉 대상 경로와 대체 또는 상태에 대한 선택적 "옵션" 개체를 사용하는 탐색 함수가 있습니다.

프로그래밍 방식으로 탐색하려면 다음 구문을 사용하세요.

this.props.navigate('/');

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