[React] React Router - Redirect 구현하기

suno·2022년 12월 26일

✅ 구현하고자 하는 것

/kimchis/:id 경로로 들어오면, /kimchis/:id/description으로 자동으로 이동(redirect) 한다.

❓ 문제 상황

function ProductDetail() {
  const { id } = useParams();
  const location = useLocation();
  const currentPath = location.pathname;
  const navigate = useNavigate();
  
  useEffect(() => {
    if (currentPath === `/kimchis/${id}` || currentPath === `/kimchis/${id}/`) {
      navigate(`/kimchis/${id}/description`);
    }
  }, [currentPath, id, navigate]);
  
  return <>
  ...
  </>;
}

ProductDetail 컴포넌트가 렌더링 될 때, 현재 경로가 /kimchis/:id 또는 /kimchis/:id/라면 react-router의 navigate 훅을 이용해 /kimchis/:id/description으로 이동한다.

뒤로가기가 안되는 문제

페이지 리다이렉트는 잘 되는데, 뒤로가기를 하면 계속 /kimchis/:id/description으로 이동하게 되는 문제가 있었다.

원인

1) /categories → 2) /kimchis/:id → 3) / /kimchis/:id/description
경로 이동 히스토리가 위와 같이 남아있어서, 아무리 뒤로가기를 해도 결국엔 다시 /kimchis/:id → / /kimchis/:id/description 이렇게 이동하게 되는 것이었다!

💡 해결 방법

function ProductDetail() {
  const { id } = useParams();
  const location = useLocation();
  const currentPath = location.pathname;
  const navigate = useNavigate();
  
  useEffect(() => {
    if (currentPath === `/kimchis/${id}` || currentPath === `/kimchis/${id}/`) {
      navigate(`/kimchis/${id}/description`, { replace: true });
    }
  }, [currentPath, id, navigate]);
  
  return <>
  ...
  </>;
}