React : useNavigate안에 값 넣어서 다음페이지로 전달하기. (feat. useLocation)

 

1. A페이지에서 fetch를 통해 백엔드에서 데이터를 받아옴.

2. 그 중에서 클라이언트가 클릭해서 선택한 값들을

3. 다음페이지인 B페이지로 보내야 하는 상황.

 

 

클라이언트가 값을 선택하고 다음페이지로 넘어갈 때 해당 값을 백엔드에 보내주고, 

다음 페이지들에서 fetch를 통해 받아오면 수월했겠지만 그렇게 구현이 어려운 상황이었다.

 

redux를 활용하는 방법과,

Router단에서 state를 만들어서 props로 전달해 주는 방법 두가지 정도가 생각이 났었는데

다른 좋은 방법이 있었다.

 

useNavigate 를 이용하는 것.

 

보통 useNavigate를 사용 할 때는 아래 처럼 하나의 인자를 이용해서 가고 싶은 곳을 지정하는 정도로 사용해왔다. 

import {useNavigate} from 'react-router-dom';


const navigate= useNavigate()

<button onClick = {navigate('/reservation')}> </button>

 

이번에 배운 것은 아래와 같은 형식으로 다음페이지에 값을 전달 할 수 있다는 것. 

navigate("/reservation", { state: { list: list } })

 

원하는 값을 {state : { 값 } }  자리에 넣으면 페이지가 이동하면서 그 값들이 포함되어 전달된다.

reservation 페이지 안에서 받을 때는 useLocation을 이용해서 받으면 된다. 

 

import { useLocation } from 'react-router-dom';

const reservationList = () => {
  const location = useLocation();
  const list = location.state.list;

 

 

 

추가로 replace라는 method를 이용하면, 이전 페이지의 history를 들고 올 수 있다. 

navigate("/some/where", { replace: true })

 

뒤로 가기도 있다 !

navigate(-1)