react-router-dom v6에서 link to props 전달하기

v5까지는 다음과 같은 방식으로 props를 전달할 수 있었다.

// 링크가 있는 컴포넌트
<Link to={{
	pathname: '/:id',
	state: {
		name: '이름',
        age: '나이'
	}
}}>이동하기</Link>

근데 v6로 업데이트 되면서 state는 저렇게 쓰지 않는다.
저렇게 하면 무슨짓을 해도 undefined만 찍힌다.

v6는 다음과 같이 작성한다.

// 링크가 있는 컴포넌트
import { Link } from "react-router-dom";

<Link to={'/:id'} state={{name: '이름', age: '나이'}}>이동하기</Link>

// 이동할 컴포넌트
import { useLocation } from "react-router-dom";

const data = useLocation().state;

state를 to 밖으로만 빼주면 된다!
달다 달아~