로그인 하지 않은 상태에서는 헤더가 렌더링 되지 않게 조건부 렌더링 설정하기

헤더를 라우팅하는 컴포넌트에서 아래와 같이 설정해주면 된다.

 

 

useLocation 훅 import 하기

import { useLocation } from "react-router-dom";

 

로그인 되어 있지 않으면 로그인 페이지로 이동시키기

const location = useLocation();
const isLoginPage = location.pathname === "/login";

...

return (
    <>
        {!isLoginPage && <Header />}        
    </>
);

 

 

로그아웃 상태에서는 헤더가 렌더링 되지 않음

로그인을 해야만 헤더가 렌더링 됨