TIL 63. Link와 useNavigate, 그리고 데이터를 넘기는 방법

Link와 useNavigate의 공통점은 페이지를 이동시켜준다는 것.

useNavigate

Link와 다른 점은 함수 호출을 통해 페이지를 이동하기 때문에 특정 조건을 충족할 경우에 페이지 이동을 하도록 할 수 있다.

// home.js
import { useNavigate } from 'react-router';

const navigate = useNavigate();

const pageClick = () => {
    navigate('/page', { state: {age : '20', name: 'kim'} });
}

// page.js
import { useLocation } from "react-router";

const Page = () => {
    const { state } = useLocation(); // {age : '20', name: 'kim'}
}

Link

a태그처럼 곧바로 이동시켜준다.
a태그와 다른 점이라면 a태그는 외부의 페이지를 열고, Link는 내부의 페이지로 이동시킨다.

// main.jsx

<Link 
  	to={'/detail'}
  	state={ {id: 1 ,title: '제목!!', name: 'kim', content: '내용!!'} }
>
	디테일 페이지로!
</Link>

// detail.jsx

// const {state} = useLocation();
const location = useLocation();
const detailData = location.state;

const {id, title, name, content} = detailData

useNavigate는 추가 로직 구현이 필요한 경우 사용하기 좋다.
예를 들면, 로그인의 상태에 따라 보여질 페이지를 만드는 경우.

Link는 단순히 상세페이지로 이동시켜주는 경우 사용하기 좋다.