OSCISTORY를 사용하여 경로를 프로그래밍 방식으로 탐색하는 방법은 무엇입니까?-프런트엔드 Q&A-php.cn

OSCISTORY를 사용하여 경로를 프로그래밍 방식으로 탐색하는 방법은 무엇입니까?

React 라우터에서 useHistory 사용하여 경로를 프로그래밍 방식으로 탐색하려면 먼저 react-router-dom 라이브러리에서 후크를 가져온 다음 구성 요소 내에서 사용해야합니다. 다음은 Navigation을 useHistory 방법에 대한 단계별 안내서입니다.

useHistory 가져 오기 : 구성 요소 파일의 시작 부분에서 react-router-dom 패키지에서 useHistory 가져 오십시오.
```
 <code class="javascript">import { useHistory } from 'react-router-dom';</code>
```
로그인 후 복사
초기화 useHistory : 기능 구성 요소 내부에서 useHistory 호출하여 히스토리 객체를 얻으십시오.
```
 <code class="javascript">const history = useHistory();</code>
```
로그인 후 복사
push 방법으로 탐색하십시오 : 히스토리 개체의 push 메소드를 사용하여 새 경로로 이동하십시오. 예를 들어, /about Page로 이동하려면 다음을 수행 할 수 있습니다.
```
 <code class="javascript">history.push('/about');</code>
```
로그인 후 복사
현재 항목을 replace 메소드로 바꾸십시오 : 새 경로로 탐색하려고하지만 히스토리 스택의 현재 항목을 교체하려면 (뒤로 버튼이 이전 페이지로 돌아 오지 않음) 대신 replace 메소드를 사용하십시오.
```
 <code class="javascript">history.replace('/about');</code>
```
로그인 후 복사

돌아가서 앞으로 나아가십시오 : goBack , goForward 및 Go Methods를 사용하여 역사 스택의 특정 지점으로 이동하여 방법을 go 수 있습니다.

 <code class="javascript">history.goBack(); // Go back to the previous page history.goForward(); // Go forward to the next page history.go(-2); // Go back two entries in the history stack</code>

로그인 후 복사

이러한 방식으로 useHistory 사용하면 React 응용 프로그램 내에서 프로그래밍 방식으로 내비게이션을 제어 할 수 있습니다.

내비게이션에 사용 가능성을 사용할 때 피해야 할 일반적인 함정은 무엇입니까?

useHistory React의 프로그래밍 방식 탐색을위한 강력한 도구이지만 다음과 같은 몇 가지 일반적인 함정이 있습니다.

구식 사용 : React Router v6의 경우 useHistory 더 이상 사용되지 않고 useNavigate 로 대체되었습니다. 최신 버전의 React 라우터에서 useHistory 사용하면 오류가 발생합니다. 사용중인 React 라우터의 버전을 항상 확인하고 적절한 후크를 사용하십시오.
직접 탐색의 과잉 사용 : 내비게이션을위한 useHistory 에 너무 많이 의존하면 응용 프로그램의 라우팅 구조에서 설계 선택이 좋지 않음을 나타낼 수 있습니다. Link 및 NavLink 구성 요소를 사용하여 가능한 경우 선언적 라우팅을 사용하여 탐색을 간단하고 유지 관리 할 수 있도록하십시오.
오류 처리 부족 : 프로그래밍 방식으로, 특히 동적 경로를 탐색 할 때, 잠재적 오류 (예 : 존재하지 않는 경로로 탐색)를 처리하지 않으면 응용 프로그램이 예기치 않게 끊어 질 수 있습니다. 오류 경계 또는 경로 수준 오류 처리를 구현하십시오.
국가 관리 혼란 : 내비게이션에 useHistory 및 상태를 사용하여 상태를 관리하려고하면 혼란을 초래할 수 있습니다. 응용 프로그램에서 내비게이션 기록과 상태 관리 사이의 분리를 이해하십시오. 상태의 경우 Context, Redux 또는 Mobx와 같은 React의 상태 관리 솔루션을 사용하는 것을 고려하십시오.
replace 오용 : 불필요하게 replace 사용하면 사용자가 뒤로 버튼을 사용하여 이전에 방문한 페이지로 이동하여 혼란 스러울 수 있습니다. 특정 이유가있는 경우에만 replace 하십시오.

사용 역사로 경로 사이에 상태를 전달하는 방법을 설명 할 수 있습니까?

useHistory 사용하여 경로 사이에 상태를 전달하면 state 특성이있는 객체를 push 또는 replace 방법으로 전달하여 달성 할 수 있습니다. 당신이 할 수있는 방법은 다음과 같습니다.

통과 상태 : 새 경로로 탐색 할 때 상태 객체를 포함 할 수 있습니다. 예를 들어:

 <code class="javascript">const history = useHistory(); history.push({ pathname: '/profile', state: { id: 123, name: 'John Doe' } });</code>

로그인 후 복사

상태 액세스 : /profile 경로에서 렌더링 된 구성 요소에서 react-router-dom 의 useLocation 사용하여 상태에 액세스 할 수 있습니다.

 <code class="javascript">import { useLocation } from 'react-router-dom'; function Profile() { const location = useLocation(); const { id, name } = location.state || {}; return ( <div> <h1>Profile</h1> <p>ID: {id}</p> <p>Name: {name}</p> </div> ); }</code>

로그인 후 복사

누락 된 상태 처리 : 대상 경로에서 상태에 액세스 할 때는 상태가 상태를 설정하는 내비게이션을 통과하지 않고 URL에 직접 액세스하는 경우를 처리 할 수 있도록 상태가 정의되어 있는지 확인하십시오.

이 단계를 수행하면 useHistory 를 사용하여 경로를 탐색 할 때 상태를 효과적으로 통과하고 활용할 수 있습니다.

Usenavigate와 같은 다른 내비게이션 후크와 유용성이 어떻게 다릅니 까?

useHistory 및 useNavigate 는 프로그래밍 방식 탐색을 가능하게하는 React 라우터의 후크이지만 라이브러리의 다른 버전에 속하며 몇 가지 주요 차이점이 있습니다.

버전 호환성 :
- useHistory React 라우터 v5에서 나 왔으며 React 라우터 v6에서 useNavigate 에 찬성하여 더 이상 사용되지 않았습니다.
- useNavigate React Router v6에서 프로그래밍 방식 탐색을위한 현재 권장 후크입니다.
구문 및 사용 :
- useHistory 재를 사용하면 일반적으로 push , replace , goBack , goForward 및 go 와 같은 방법을 사용합니다.
- useNavigate 사용하면 후크는 경로와 옵션으로 호출하여 동일한 결과를 달성하기 위해 호출하는 함수 ( navigate )를 반환합니다. 예를 들어, navigate('/about') 또는 navigate('/about', { replace: true }) .
통과 상태 :
- useHistory 에서는 객체를 전달하여 state 재산으로 push 거나 replace .
- useNavigate 사용하면 navigate 호출 할 때 state 객체를 옵션으로 전달할 수 있습니다.
```
 <code class="javascript">// useHistory history.push({ pathname: '/profile', state: { id: 123 } }); // useNavigate navigate('/profile', { state: { id: 123 } });</code>
```
로그인 후 복사
상대적인 내비게이션 :
- useNavigate 상대 경로 탐색을 지원하므로 useHistory 사용하여 사용하는 경로 문자열에서 형제 또는 부모 경로로 이동할 수 있습니다 ..
후면 및 전방 탐색 :
- useHistory goBack 및 goForward 와 같은 방법을 직접 제공합니다.
- useNavigate 사용하면 navigate(-1) 호출하여 뒤로 호출하고 navigate(1) 동일한 효과를 얻을 수 있습니다.