React Router v6에서 \'TypeError: 정의되지 않은 속성을 읽을 수 없습니다(\'push\' 읽기)\' 오류를 수정하는 방법은 무엇입니까?

React Router v6에서 프로그래밍 방식으로 탐색

React Router v6에서 프로그래밍 방식으로 탐색하면 "TypeError: Cannot read Properties of unjust(읽기 ' push')' 오류가 발생했습니다. 이는 정의되지 않은 존재하지 않는 탐색 속성에서 탐색을 시도할 때 발생합니다.

원인:

useNavigate 후크는 함수 구성 요소용으로 설계되었습니다. 클래스 구성 요소에는 사용자 정의 고차 구성 요소(HOC) 또는 기능 구성 요소로의 변환이 필요합니다.

해결책 1: 기능 구성 요소로 변환

AddContacts를 기능 구성 요소로 변환하고 사용 useNavigate:

<code class="javascript">import { useNavigate } from "react-router-dom";

const AddContacts = () => {
  const navigate = useNavigate();

  const onSubmit = (e) => {
    // ... submit logic ...
    navigate("/");
  };

  return (
    // ... form elements ...
  );
};</code>

솔루션 2: Router HOC를 사용한 사용자 정의

Router HOC를 사용한 사용자 정의 생성:

<code class="javascript">const withRouter = (WrappedComponent) => (props) => {
  const navigate = useNavigate();

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

AddContacts를 HOC로 래핑 :

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

업데이트된 탐색 구문

React Router v6에서 탐색 기능의 구문이 변경되었습니다.

<code class="javascript">navigate(to, options?);
// where to is the target path and options is an optional object with replace and/or state</code>

따라서 탐색 문은 다음과 같습니다.

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

이러한 솔루션을 사용하면 React Router v6에서 프로그래밍 방식으로 효과적으로 탐색하고 정의되지 않은 탐색 오류를 피할 수 있습니다.

위 내용은 React Router v6에서 \'TypeError: 정의되지 않은 속성을 읽을 수 없습니다(\'push\' 읽기)\' 오류를 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!