로그인페이지에 헤더 안보이게 하기 (with. useLocation)

로그인 페이지나 회원가입 페이지에만 헤더를 안보이게 해야하는 경우가 있다.

이미 Router에서 Header가 모든 페이지에 보이게 해두었는데 이런경우에는 어떻게 해야할까?

 

나는 react-router-dom의 useLocation으로 구현했다.

구현기

1. Router.tsx

function Router() {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/prac" element={<PracPage />} />
        <Route path="/login" element={<LoginPage />} />
      </Routes>
    </BrowserRouter>
  );
}

 

예를들어 Router의 구조가 이렇게 되어있다고 하자. 

Header는 모든 페이지에서 보여질 것이다.

Header.tsx

import React, { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";

function Header() {
  const location = useLocation();
  const [isLoginPage, setIsLoginPage] = useState(true);

  useEffect(() => {
    location.pathname === "/login"
      ? setIsLoginPage(true)
      : setIsLoginPage(false);
  }, [location.pathname, setIsLoginPage]);

  if (isLoginPage) return null;
  return (
    <NavContainer>
      <Nav> .... </Nav>
    </NavContainer>
  );
}

export default Header;

useState와 useEffect, useLocation으로 구현할 수 있었다.

 

만약 location.pathname === "/login" 이면 (즉, 로그인페이지면)

Header 컴포넌트는 null로 리턴이될 것이고

 

로그인페이지가 아니면

Header 컴포넌트는 잘 보여질 것이다 : )