[ React ] - navigate로 state값 가져오기

onClick시 페이지 이동을 원할경우 내가 받아온 데이터를 state로 넘겨줄 수 있다.

const navigate = useNavigate();
const handleClick = () => {
  navigate(`/products/${id}`, { state: { product } });
};

내가 받아온 데이터의 이름이 product 면 state 뒤에 같은 이름인 product 로 작성한다.

넘어가는 페이지의 컴포넌트에는 받아온 값 product 를 풀어줘야하는데 방법은 useLocation을 이용해 받아올 수 있다.

const{
  state:{
    product:{id,image,title,description,category,price,options}
  }
}= useLocation();

id, image, title, description, category ,price ,options 은 product 값들 중에서 내가 받아오고 싶은것들을 적용해준뒤 해당 컴포넌트에서 값들만 이용해서 작성하면 된다. !