[React] 뒤로가기

💥 처음 코드

const HeaderBSU = () => {
  const location = useLocation();
  const navigate = useNavigate();

  const handleBack = () => {
    if (location.pathname === '/feed/search') {
      navigate('/home');
    }
  };

  return (
    <HeaderContainer>
      <BackBtn onClick={handleBack} />
      <form action="submit">
        <SearchInp type="text" placeholder="계정 검색" />
      </form>
    </HeaderContainer>
  );
};

사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 useLocation hooks을 사용하여 현재 주소의 경로인 pathname 으로 조건문을 걸어 useNavigate 를 사용하여 페이지를 이동하도록 했다.

문제점

점점 페이지는 늘어나고, 각 페이지에 맞는 조건문을 작성하는 건 매우 비효율적이다.

♻️ 리팩토링 코드

const HeaderBSU = () => {
  const navigate = useNavigate();

  const handleBack = () => {
    navigate(-1);
  };

  return (
    <HeaderContainer>
      <BackBtn onClick={handleBack} />
      <form action="submit">
        <SearchInp type="text" placeholder="계정 검색" />
      </form>
    </HeaderContainer>
  );
};

navigate(-1) 만 해주면 뒤로가기 구현 끝! 앞으로 가기는 navigate(1)

참고 : React Router