useLocation 훅

만난 문제

ReferenceItem 컴포넌트와 DetailPage 컴포넌트는 서로 부모 자식 관계도 아니고 같은 부모를 둔 형제 관계도 아닌데, ReferenceItem에 있는 값들을 Detail page에 전달해야 하는 문제가 생겼다.

문제 해결 방법

Link 컴포넌트나 navigate 함수를 통해 접근되는 링크(컴포넌트)에 값을 보낼 때는 state를 사용할 수 있다. 해당 링크로 이동하면 location.state에 전달된 상태 객체가 포함된다. 그 상태는 useLocation을 통해 접근할 수 있다.

const ReferenceItem = () => {
  const navigate = useNavigate();
  const handleClickView = () => {
    navigate(`/${assignmentId}/${referenceId}`, {
      state: {
        index,
        reference,
        selectedStyleName,
        referenceId,
        referenceName,
        assignmentId,
        paperId,
        referencesList,
      },
    });
  };
}

const DetailPage = () => {
  const location = useLocation();
  const {
    index,
    reference,
    selectedStyleName,
    referenceId,
    referenceName,
    assignmentId,
    paperId,
    referencesList,
  } = location.state || {};