🤙 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)