해결됨: 반응 라우터 기록%2Cpush에서 데이터 전달

react router history, push에서 데이터 전달과 관련된 주요 문제는 데이터가 페이지 새로 고침에서 지속되지 않는다는 것입니다. 사용자가 페이지를 새로 고치면 history.push에 저장된 데이터가 손실되고 이후 페이지 로드 시 사용할 수 없게 됩니다. 이로 인해 예기치 않은 동작이 발생할 수 있으며 이전 페이지 로드에서 데이터에 액세스하거나 데이터를 저장하려고 할 때 문제가 발생할 수 있습니다.

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

const MyComponent = () => {
  const history = useHistory();

  const handleClick = (data) => {
    history.push({ pathname: "/mypage", state: data });
  };

  return <button onClick={() => handleClick({ someData: "data" })}>Go</button>;
};

1. 이 행은 react-router-dom 라이브러리에서 useHistory 후크를 가져옵니다. 이 후크는 앱의 현재 위치를 추적하는 히스토리 객체에 대한 액세스를 제공합니다.

2. 이 줄은 MyComponent라는 기능 구성 요소를 선언하고 이를 상수 변수에 할당합니다.

3. 이 행은 1행에서 가져온 useHistory 후크를 사용하여 기록 개체에 액세스하고 이를 history라는 상수 변수에 할당합니다.

4. 이 줄은 data라는 인수를 사용하고 history.push()를 사용하여 경로 이름 및 상태 속성을 포함하는 객체를 히스토리 스택에 푸시하는 handleClick이라는 함수를 선언합니다.

5. 이 행은 사용자가 클릭할 때 someData를 인수로 포함하는 객체와 함께 handleClick()을 호출하는 onClick 이벤트 핸들러가 있는 버튼 요소를 반환합니다.

히스토리 푸시

React Router의 기록 푸시는 페이지를 새로 고치지 않고 브라우저에서 프로그래밍 방식으로 URL을 변경하는 데 사용되는 방법입니다. 이를 통해 개발자는 여전히 탐색 및 딥 링크를 처리할 수 있는 단일 페이지 애플리케이션을 만들 수 있습니다. 기록 푸시는 개발자가 페이지를 다시 로드하지 않고도 현재 URL을 조작할 수 있는 브라우저의 기록 API를 사용하여 작동합니다. 이를 통해 사용자는 매번 다시 로드하지 않고도 애플리케이션의 다른 페이지 사이를 탐색할 수 있습니다. 또한 딥 링크에 사용할 수 있으므로 사용자가 애플리케이션의 특정 부분에 직접 링크할 수 있습니다.

반응 라우터에서 기록을 사용하는 방법

React Router는 React 애플리케이션에서 기록을 사용하는 방법을 제공합니다. 기록을 사용하면 방문한 이전 페이지뿐만 아니라 현재 페이지를 추적할 수 있습니다. 이는 탐색을 만들고 사용자 작업을 추적하는 데 유용합니다.

React Router에서 history를 사용하기 위해서는 history 패키지의 createHistory() 메소드를 이용하여 history 객체를 생성해야 합니다. 이렇게 하면 push(), replace() 및 go()와 같은 메서드에 액세스할 수 있습니다. 이러한 메서드를 사용하면 브라우저의 URL을 조작하고 애플리케이션의 다른 경로를 탐색할 수 있습니다. 또한 listen() 메서드를 사용하여 URL의 변경 사항을 수신하고 그에 따라 애플리케이션을 업데이트할 수 있습니다.

기록 개체를 만든 후에는 만들 때 라우터 구성 요소에 전달할 수 있습니다. 이렇게 하면 React Router가 사용자가 만든 모든 변경 사항을 추적하고 그에 따라 업데이트할 수 있습니다.

React Router와 함께 기록을 사용하면 개발자가 사용자가 쉽게 이해하고 상호 작용할 수 있는 강력한 탐색 구성 요소를 쉽게 만들 수 있습니다.

관련 게시물:

코멘트 남김