[React] React Router v6 useNavigate()로 파라미터(state) 보내고 받는 방법: useLocation()

1. useNavigate() 로 파라미터 보내는방법

현재 페이지에서 다른 페이지로 이동할 때 값을 보내기 위해 아래와 같이 사용한다.

const navigate = useNavigate();

const param = {'key1' : 'value1', 'key2': 'value2'};
navigate('/main', {state: param});
navigate('/page', {state: {'dog' : '멍뭉'}});

예시처럼 navigate('/경로', {state: {키 : 값}}) 형태로 넣어준다.

 

2. 파라미터 받는 방법 : useLocation()

페이지로 보낸 param 값을 받으려면 이동한 페이지에서 아래와 같이 사용한다. (위의 1번 예시와 이어짐.)

const location = useLocation();

// '/main'
const key1 = location.state.key1; // value1
const key2 = location.state.key2; // value2

// '/page'
const dog = location.state.dog; // 멍뭉

아예 location을 찍어서 보는 것도 좋을 것 같다.