react router (navigate)

 

1. 라우팅 방식

 

방식네비게이션	유형
<Link />	Declarative Navigation     <a>태그와 유사
<Navigate />	Declarative Redirect
navigate()	Imperative / Programmatic Navigation

 

 

구분	<Navigate />	navigate()
실행 위치	렌더링 결과	effect / 이벤트
스타일	선언형	명령형
가독성	높음	중간
라우터 가드	최고	가능하지만 복잡
사용 예	인증 가드 권한 체크 필수 파라미터 없음	애니메이션 후 이동 API 성공 후 이동 타이머 기반 이동

 

라우터가드 예시

if (!isLogin) {
  return <Navigate to="/login" replace />;
}

 

---

2. 파라미터 전달방식

 

 

1) QueryString

<Link to={{ pathname: "/search", search: "?q=react" }} />

 

navigate({
  pathname: "/search",
  search: "?q=react&page=2",
});

 

2) State

<Link
  to="/detail"
  state={{ from: "list", scroll: 120 }}
/>

 

navigate("/detail", {
  state: { from: "list", scroll: 120 },
});

 

참고) location.state는 “같은 히스토리 엔트리 위에서 새로고침”하면 유지될 수 있다