[코드잇] 리액트 라우터 - 3. Navigate, useNavigate, redirect

iberis2·2023년 4월 8일

React 리액트

목록 보기

12/20

Link, Navigate, useNavigate는 언제 쓰는게 좋을까?

Link

사용자가 클릭해서 페이지를 이동하도록 할 때 사용
대부분의 경우 Link 만으로도 충분하다.

하이퍼링크 텍스트

페이지를 이동하는 버튼

이미지 등

Navigate

특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때 사용

쇼핑몰의 회원 전용 페이지에 로그인없이 들어와서 로그인 페이지로 리다이렉트하는 경우

쇼핑몰의 상품 상세 페이지에서 제품이 품절되었거나 삭제되어서 다른 페이지로 이동시키는 경우

useNavigate

특정한 코드의 실행이 끝나고 나서 페이지를 이동시키고 싶을 때 사용

쇼핑몰에서 장바구니에 담기를 눌렀을 때 리퀘스트를 보내고 장바구니 페이지로 이동시키는 경우

쇼핑몰에서 결제하기 버튼을 누르고 나서 모든 결제가 완료된 후에 페이지를 이동시키는 경우

리다이렉트된 로그인 페이지에서 로그인을 완료한 후에 처음 진입했던 페이지로 돌아가는 경우

📑 Navigate : 렌더링시 위치 변경

<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

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에 이력을 남길지 여부를 설정할 수 있다.

true : history 안남김 (뒤로 가기 불가능)
false : history 남김 (뒤로 가기 가능, default 값)

{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>

📑 redirect

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;
};