Link, Navigate, useNavigate는 언제 쓰는게 좋을까?
Link
사용자가 클릭해서 페이지를 이동하도록 할 때 사용
대부분의 경우 Link 만으로도 충분하다.
- 하이퍼링크 텍스트
- 페이지를 이동하는 버튼
- 이미지 등
Navigate
특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때 사용
- 쇼핑몰의 회원 전용 페이지에 로그인없이 들어와서 로그인 페이지로 리다이렉트하는 경우
- 쇼핑몰의 상품 상세 페이지에서 제품이 품절되었거나 삭제되어서 다른 페이지로 이동시키는 경우
useNavigate
특정한 코드의 실행이 끝나고 나서 페이지를 이동시키고 싶을 때 사용
- 쇼핑몰에서 장바구니에 담기를 눌렀을 때 리퀘스트를 보내고 장바구니 페이지로 이동시키는 경우
- 쇼핑몰에서 결제하기 버튼을 누르고 나서 모든 결제가 완료된 후에 페이지를 이동시키는 경우
- 리다이렉트된 로그인 페이지에서 로그인을 완료한 후에 처음 진입했던 페이지로 돌아가는 경우
<Navigate to="경로">
는 렌더링될 때 현재 위치를 변경한다.
🔗 ReactRouter 공식 홈페이지 : Navigate
<Route>
에 지정한 경로 외의 경로로 접속했을 때 보여줄 컴포넌츠를 지정할 때에는 path=* 로 지정해주면 된다.
그런나 여전히 하위 경로인 /courses
의 아래에 잘 못된 경로(/courses/wrongPath
)로 접속하면 빈 화면이 보여지게 된다.
이 때 잘 못된 경로에 대해 다른 경로로 이동시키도록 Navigate를 사용할 수 있다.
<Navigate to="이동시키려는 경로" />;
import { useParams, Navigate } from "react-router-dom";
function CoursePage() {
const { courseSlug } = useParams(); // 현재 경로 리턴
const course = getCourseBySlug(courseSlug); // courseSlug 값에 따라 course 데이터 객체를 리턴 함수
const courseColor = getCourseColor(course?.code);
{/* course 값이 없다면 /courses 경로로 이동 */}
if (!course) {
return <Navigate to="/courses" />;
}
{/* 하기 내용 생략 */}
useNavigate는 프로그래밍 방식으로 방향을 처리(navigate)할 수 있는 함수를 반환한다.
🔗 ReactRouter 공식 홈페이지 : useNavigate
import { useNavigate } from "react-router-dom";
function CoursePage() {
const navigate = useNavigate();
// 클릭하면 위시리스트에 담고 위시리스트(/wishlist)로 페이지를 이동하는 함수
const handleAddWishlistClick = () => {
addWishlist(course?.slug);
navigate("/wishlist");
};
return // 내용 생략
}
navigate(0), navigate(-1) 과 같은 값을 넣어 페이지 새로고침, 히스토리의 뒤로가기 버튼과 같은 동작을 시킬 수도 있다.
옵셔널한 두 번째 인자로 객체를 전달하면서 replace 와 state를 설정할 수 있다.
{ replace : boolean값 }
: history에 이력을 남길지 여부를 설정할 수 있다.
{state: {전달할 데이터} }
: 현재 페이지에서 이동할 페이지로 전달하고 싶은 데이터를 객체로 전달할 수 있다.
useLocation
의 state
프로퍼티로 받을 수 있다.// CoursePage.js
import { useNavigate } from "react-router-dom";
function CoursePage( { course } ) {
const navigate = useNavigate();
const handleAddWishlistClick = () => {
addWishlist(course?.slug);
navigate("/wishlist", {
state: {
...course,
},
});
};
return // 내용 생략
}
클릭하면 위시리스트에 코스가 담기고
위시리스트(/wishlist)로 페이지를 이동하며,
위시리스트에는 course 데이터가 전달되었다.
import { Link, useLocation } from "react-router-dom";
function WishlistPage() {
const location = useLocation();
console.log(location.state);
//... 이하 생략
}
useLocation 이 리턴하는 객체의 state 프로퍼티에서 그 값을 확인할 수 있다.
참고로 Link 태그 에서도 state를 보낼 수 있다.
<Link to="/main" state={{ test: "hello world" }} > test </Link>
Because you can return or throw responses in loaders and actions, you can use redirect to redirect to another route.
🔗 ReactRouter 공식 홈페이지 : redirect
<Router>
안에 사용하던 Redirect는 더 이상 사용되지 않고, redirect만 사용되는 것 같다.
import { redirect } from "react-router-dom";
const loader = async () => {
const user = await getUser();
if (!user) {
return redirect("/login");
}
return null;
};
getUser() 에서 얻은 user 값이 없다면 /login 경로로 이동한다.
페이지 리디렉션이 데이터에 대한 응답인 경우, 로더 및 작업에서 useNavigate 대신 redirect 를 사용하길 공식 홈페이지에서는 권장하고 있다.
하지만 아직 실제 사용 사례를 본 적은 없다.