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

Question

버튼 제출과 같은 일부 사용자 작업에 대해 탐색을 수행하고 싶습니다. 사용자가 "연락처 추가" 버튼을 클릭한다고 가정하면, 반응 라우터가 홈페이지 "/"로 리디렉션되기를 원합니다. 현재 저는 이 문제에 직면해 있습니다. --> TypeError: Cannot readproperties of undetermined('push' 읽기). 초보자로서 전문가의 도움에 진심으로 감사드립니다.

AddContacts.js

으아아아

App.js 파일입니다

으아아아

Answer 1

React Router v6

에서 리디렉션하는 방법 으아악

Answer 2

질문

존재하지 않는 navigate 속성에서 탐색하려고 했기 때문에 정의되지 않았습니다.

으아악

useNavigate 후크는 함수 구성 요소와만 호환되므로 클래스 구성 요소와 함께 useNavigate 挂钩仅与函数组件兼容，因此如果您想要/需要将 navigate 与类组件一起使用，则必须转换 AddContacts code> 到函数组件，或者滚动您自己的自定义 withRouter 高阶组件来注入“路由道具”，例如来自 react-router-dom 的 withRouter HOC 를 사용하거나 사용해야 하는 경우 AddContacts를 함수 구성 요소로 변환해야 합니다. 사용자 정의

상위 구성 요소를 굴려서 react-router-dom의

HOC

v5.x와 같은 "라우팅 소품"을 삽입합니다.

솔루션withRouter

클래스 구성요소를 함수 구성요소로 변환하는 방법은 다루지 않겠습니다. 다음은 사용자 정의

HOC의 예입니다. AddContacts 으아악

그리고 새로운 HOC 장식

구성 요소를 사용하세요. navigate 属性（以及您设置的任何其他属性）传递给装饰组件，并且 this.navigate 으아악

이제

속성(및 설정한 다른 속성)이 데코레이팅된 구성 요소로 전달되고 this.navigate가 정의됩니다. history 对象。 navigate 是一个函数而不是一个对象。要使用您调用函数并传递 1 或 2 个参数，第一个是目标路径，第二个是带有 replace 和/或 state

또한 탐색 API가 v5에서 v6으로 변경되었으며 더 이상 직접 history 개체를 사용하지 않습니다.

는 객체가 아닌 함수입니다. 함수를 호출하고 1개 또는 2개의 인수를 전달하려면 첫 번째는 대상 경로이고 두 번째는 선택적 "옵션" 개체/값입니다.

🎜이제 탐색은 다음과 같습니다.🎜 으아악