[React] Navigate ...?

 React navigate 표지

---

Link 는 특정 주소로 이동해주는 태그였다면, Navigate 는 특정 행동을 했을 때 해당 주소로 이동해줄 수 있게 만들어준다.

---

1.  useNavigate 사용하기

useNavigate는 양식이 제출되거나 특정 event가 발생할 때,  url을 조작할 수 있는 interface를 제공한다.

☑️ useNavigate의 인자들

navigate("../success",  { replace: true});

첫 번째 인자로는 주소를 받으며 두 번째 인자로 { replace, state } 인수를 사용한다.

• replace (true or false)

true를 사용한다면, navigate에 적힌 주소로 넘어간 후, 뒤로가기를 하더라도 방금의 페이지로 돌아오지 않는다.
이 때는 자신의 메인 페이지 ("/")로 돌아오게 된다. false는 뒤로가기가 가능하며 이 것이 기본 값이다.

• state (any)

state가 필요하다면 사용할 수 있다고 한다. 하지만, 아직 어떻게 사용하는지 모르겠다. 좀 더 공부해야 알 수 있을 것 같다.

 

---

2.  Navigate 사용하기

<Navigate> 요소는 렌더링될 때 현재 위치를 변경한다. useNavigate를 둘러싼 component wrapper, props와 동일한 모든 인수를 허용한다. 이 태그 역시 to, replace, state 를 모두 사용할 수 있다.