react 에서 navigate 사용하기 (useNavigate / Navigate)

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

 

---

1. useNavigate 쓰기

 

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

 

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

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

  const onClickImg = () => {
    navigate(`/comment/id/등등 내가 원하는 주소`);
  };

  return (
  	<img src={...} alt={...} onClick={onClickImg} />
  );
}

export default Func;

 

이렇게 작성한다고 합니다. 이 코드에서의 url이 www.naver.com 이었다면 이는 www.naver.com/comment/id... 으로 바뀌었을 것입니다. 

useNavigate에는 두 가지 특징이 있습니다.

 

---

(1) useNavigate의 인자들

 

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

 

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

 

• replace (true or false)

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

 

• state (any)

state가 필요하다면 사용할 수 있다고 합니다만... 저는 어떻게 사용하는지도 잘 모르겠고 제대로 알 수 있는 방법도 없더군요...ㅜ

 

---

(2) useHistory의 기능도 포함

 

useNavigate는 react v6 에서 useHistory 가 변화한 것입니다. 이 때 useHistory 에서 사용하던, window의 history 를 이용한 navigate 기능도 할 수 있게 되었습니다.

 

<>
  <button onClick={() => navigate(-2)}>
    Go 2 pages back
  </button>
  <button onClick={() => navigate(-1)}>
    Go back
  </button>
  <button onClick={() => navigate(1)}>
    Go forward
  </button>
  <button onClick={() => navigate(2)}>
    Go 2 pages forward
  </button>
</>

 

History란 세션 기록(페이지 방문 기록)에 대한 접근 방법과 메서드를 제공하는 것입니다. 또한 세션(session)이란 웹 사이트의 여러 페이지에 걸쳐 사용되는 사용자 정보를 저장하는 방법을 의미하지요. 간단하게는 그냥 이걸로 뒤로가기 앞으로가기가 된다고 알고 계시면 되는데 더욱 알고 싶으시다면 어쩔 수 없이 아래 페이지로 갑니다.

2022.01.21 - [📲 For Front/📲Front Knowledge] - Web History 란 무엇인가? (History API)

 

 

---

2. Navigate 쓰기

 

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

 

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

function Func() {

    const onClickImg = () => {
    return <Navigate to="/login" />;
  }

  return (
  	<img src={...} alt={...} onClick={onClickImg} />
  );
}

export default Func;

 

Note: This API is mostly useful in React.Component subclasses that are not able to use hooks. In functional components, we recommend you use the `useNavigate` hook instead.
-참고 : 이 API는 대부분 후크를 사용할 수 없는 React.Component 하위 클래스에서 유용합니다. 기능적 구성 요소에서는 대신 `useNavigate` 후크를 사용하는 것이 좋습니다.-

 

라고 공식 홈페이지에서는 얘기합니다. 하위 클래스를 위해서 유용하게 쓰이는 것이기 때문에 엥간해서는 useNavigate를 쓰라고 하는 것 같습니다.

 

 

---

< 출처 >

[React] react-router-dom v6 업그레이드 되면서 달라진 것들 (https://velog.io/@soryeongk/ReactRouterDomV6)

navigate 공홈 (https://reactrouter.com/docs/en/v6/api#navigate)

useNavigatge 공홈 (https://reactrouter.com/docs/en/v6/api#usenavigate)

 

발췌 블로그 https://basemenks.tistory.com/278