[React] 리다이렉트 : Navigate 페이지 이동

 

 

💡 잘못된 경로로 접근할 때 페이지를 돌려보자!

 

로그인이 풀렸다던가, 데이터가 없다던가 할 때

페이지가 돌아가도록 해보자. (페이지를 바꿔주자)

 

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

function CoursePage() {
  const { courseSlug } = useParams();
  const course = getCourseBySlug(courseSlug);
  const courseColor = getCourseColor(course?.code);

  if (!course) { // 추가한 부분
    return <Navigate to="/courses" />;
  }

  const headerStyle = {
    borderTopColor: courseColor,
  };

 

코스 리스트 페이지에서 나열된 코스를 누르면 코스 페이지로 이동해

파람스의 courseSlug 에 맞는 데이터를 가져오는데!

 

잘못된 주소가 입력된다면 /hi ~

아무것도 뜨지 않게 된다.

 

그러니 조건문을 걸어서 코스 리스트 페이지로 돌려놨다!

❗️ 꼭 / 붙이기

 

 

😲 거의 Link 나 useNavigate 를 썼었는데 하나 더 알게됐다..!