12. 컴포넌트 이동 시 props 전달하기

1. 컴포넌트 이동 시 props 전달 방법

• navigate 함수의 첫번째 인자로는 주소, 두번째 인자인 state에 전달할 데이터를 넣어준다.

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

const navigate = useNavigate();

const onSubmit = (data) => {
    axios
      .post("post할주소", data)
      .then((response) => {
        if (response.status === 200) {
          navigate("이동할 주소", {state:response.data});
        } else {
          alert("Submit failed!!");
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

참고로 두번째 인자로 { replace, state }를 넣을 수 있다. state는 위처럼 사용하면 되고, replace는 true로 한다면, navigate에 적힌 주소로 넘어간 후 뒤로가기를 하더라도 방금의 페이지로 돌아오지 않고 ("/")로 돌아온다. false는 뒤로가기가 가능하며 default값이다.

 

2. 이동한 컴포넌트에서 props 받아와서 사용하기

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

const {state} = useLocation();
console.log(state);

useLocation을 이용하여 전달된 props를 받아올 수 있다.