React 라우터를 사용하여 프로그래밍 방식으로 탐색

반응형

리액트 라우터로 링크 요소를 사용하여 리액트 라우터에 의해 기본적으로 처리되는 링크를 생성할 수 있습니다.

나는 내부적으로 이것을 context.transitionTo(...)라고 부른다.

네비게이션을 하고 싶어요. 링크가 아니라 드롭다운 선택 항목(예: 이거 암호로 어떻게 해? 이게 뭐에요?

내비게이션 믹스인을 봤는데, 믹스인 없이 할 수 있나요?

 

— — — — — — — — — 답변(Answer) — — — — — — — — — — —

후크를 사용하여 라우터 v5.1.0 대응

당신이 >16.8.0 및 기능 구성요소를 사용하는 경우, >5.1.0에 새로운 useHistory hook이 있다.

import { useHistory } from "react-router-dom";

function HomeButton() {
    const history = useHistory();

    function handleClick() {
          history.push("/home");
    }

    return (
          <button type="button" onClick={handleClick}>
            Go home
                </button>
  );
}

React Router의 v4에서는 구성 요소 내의 프로그래밍 라우팅에 대해 세 가지 접근 방식을 사용할 수 있습니다.

 

• WithRouter 고차 구성 요소를 사용합니다.
• 컴포지션을 사용하고 렌더링
  • 컨텍스트를 사용합니다.
  리액트 라우터는 대부분 기록 라이브러리 주변의 래퍼이다. history는 브라우저 창과의 상호 작용을 처리합니다.기록(브라우저 및 해시 기록 포함)을 참조하십시오. 글로벌 히스토리가 없는 환경에 유용한 메모리 히스토리도 제공합니다. 이것은 특히 모바일 앱 개발(대응 네이티브)과 Node를 이용한 유닛 테스트에서 유용합니다.이전 버전의 리액트 라우터에서는 자신만의 히스토리 인스턴스를 생성해야 했지만 v4에서는 <브라우저>, <해시루터>, <메모리루터> 구성 요소가 브라우저, 해시, 메모리 인스턴스를 생성합니다. 응답 라우터는 라우터와 연결된 기록 인스턴스의 속성 및 메소드를 라우터 오브젝트 아래에서 컨텍스트를 통해 사용할 수 있도록 합니다.
• 기록 인스턴스에는 밀어넣기와 바꾸기의 두 가지 탐색 방법이 있습니다. 기록을 방문한 위치의 배열로 생각할 경우 를 누르면 배열에 새 위치가 추가되고 배열의 현재 위치가 새 위치로 바뀝니다. 일반적으로 탐색할 때 푸시 방법을 사용할 수 있습니다.