TIL-43일차 Router useLocation를 이용하기(특정 페이지에만 header 적용)

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

  const goToHome = () => {
    navigate("/");
  };

  const goToback = () => {
    navigate(-1);
  };
  const locationNow = useLocation();

  if (locationNow.pathname === "/") return null;

  return (
    <>
      <Stcontainer>
        <Sthead>
          <Sthome>
            <IoIosHome onClick={goToHome} size="85" />
          </Sthome>
          <Stlogo>
            <Logo />
          </Stlogo>
          <StBack onClick={goToback}>
            <SlArrowLeft size="50" />
            <div>뒤로가기</div>
          </StBack>
        </Sthead>
      </Stcontainer>
    </>
  );
};

 

위 사진과 같이 첫 페이지인 /을 제외하고는 모든 페이지에 header를 적용시킬려고 한다. 

이때 router로 모든페이지에 적용시킬때, / 에서만 header를 제외하고 싶을 때 사용하는 것이

useLocation 훅이다ㅣ.

위에 적힌

const locationNow = useLocation();

  if (locationNow.pathname === "/") return null;

  return ( )

을 입력하면 header를 /에서만 제외할 수 있다.