해결됨: 데이터 탐색 반응 라우터 돔 전달

React Router DOM으로 탐색할 때 데이터 전달과 관련된 주요 문제는 데이터가 URL 쿼리 문자열로 전달되어야 한다는 것입니다. 즉, 민감한 정보는 URL에 표시되므로 전달되기 전에 인코딩해야 합니다. 또한 데이터가 너무 크면 URL의 최대 길이를 초과하여 오류가 발생할 수 있습니다. 마지막으로 React Router DOM을 사용하여 애플리케이션 내의 페이지 사이를 탐색하는 경우 수동으로 상태를 관리하고 변경 사항을 추적하여 모든 구성 요소가 동일한 데이터에 액세스할 수 있도록 해야 합니다.

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

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

  const handleClick = (data) => {
    history.push({ pathname: '/myroute', state: data }); // pass data to route as state object
  };

  return (
    <button onClick={() => handleClick(data)}>Go to MyRoute</button>
  );
};

// 1행: 이 행은 react-router-dom 라이브러리에서 useHistory 후크를 가져옵니다.
// 3행: 이 행은 JSX를 반환하는 함수인 MyComponent라는 상수를 선언합니다.
// 4행: 이 행은 react-router-dom에서 가져온 useHistory 후크에 할당된 history라는 상수를 선언합니다.
// 6행: 이 행은 하나의 매개변수 data를 받는 handleClick이라는 함수를 선언합니다.
// 7행: 이 행은 히스토리 오브젝트를 사용하여 경로 이름 '/myroute'와 오브젝트로 전달된 상태 데이터를 사용하여 스택에 새 경로를 푸시합니다.
// Lines 9 – 11: 이 라인은 handleClick을 호출하고 데이터를 인수로 전달하는 onClick 이벤트 핸들러가 있는 버튼 요소가 포함된 JSX를 반환합니다.

라우터 돔 반응

React Router DOM은 개발자가 React 애플리케이션 내에서 경로를 만들고 관리할 수 있게 해주는 React용 라우팅 라이브러리입니다. Link, Route, Switch 및 BrowserRouter와 같은 구성 요소를 포함하여 React로 복잡한 다중 페이지 웹 애플리케이션을 구축하는 데 필요한 핵심 구성 요소를 제공합니다. 또한 동적 경로 매칭 및 위치 추적과 같은 기능을 제공합니다. React Router DOM을 사용하면 개발자는 URL이나 브라우저 기록을 수동으로 관리할 필요 없이 여러 보기와 경로가 있는 단일 페이지 애플리케이션을 쉽게 만들 수 있습니다.

react-router-Dom에서 탐색을 통해 데이터를 전달하는 방법

React Router에서는 history API의 state 객체를 이용한 네비게이션을 통해 데이터를 전달할 수 있습니다. 상태 객체는 요소. 데이터를 전달하기 위해 탐색 함수를 호출할 때 상태 개체에 추가할 수 있습니다. 예를 들어:

const { 히스토리 } = this.props;
히스토리.푸시({
경로 이름: '/일부/경로',
상태: { someData: '데이터' }
});