useNavigate()

✔ Link가 a 태그와 같이 클릭 시 특정 주소로 이동해주는 태그라면,
useNavigate는 양식이 제출되거나 특정 행동을 하면 페이지 이동을 할 수 있는 "함수를 반환"하는 훅
✔ 특정 조건을 충족할 경우에 페이지 이동이 가능하다.
✔ index를 사용하여 history 기능 사용 가능 -> navigate(-1), navigate(1), ...

사용방법

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

function MainPage() {
  const navigate = useNavigate();

  return(
    <Wrapper>
      <Container>
        <Button title="글 작성하기" onClick={() => { navigate("/post-write"); }} />
        <PostList posts={data} onClickItem={(item) => { navigate(`/post/${item.id}`); }} />
      </Container>
    </Wrapper>
  );
}

useNavigate()의 인자

✔ navigate("/이동경로", { replace: true, state: { 키:값, 키:값 ... }});
✔ 첫 번째 인자로는 주소, 두 번째 인자로 { replace, state } 인수를 사용

replace (true or false)

• true를 사용한다면, 이동경로로 넘어간 후 뒤로가기를 하더라도 방금의 페이지로 돌아오지 않음.
  이 때는 자신의 메인 페이지 ("/")로 돌아오게 됨.

• false는 뒤로가기가 가능하며 기본 값.
  

state 사용 예시

navigate("/이동경로", {
	state: {
		id: 1,
		job: "개발자"
	}
});
    
const navigateState = useNavigate().state;
const [userId, setUserId] = useState(navigateState && navigateState.id);