react-router-dom 사용할 때 특정 페이지에서만 컴포넌트(Header,Footer,Nav 등) 보여주기

왜 사용하게 되었을까요?

사이드 프로젝트를 하던 도중에 어떤 페이지는 Header,Footer,Nav가 보여져야하고, 어떤 페이지에서는 안보여주는 방법을 찾아보고 있었습니다.

😱 각 필요한 페이지마다 Header, Footer, Nav를 보여주도록 각각 작성하는것은 비효율적이라는 생각이 들어서 원하는 페이지에서만 원하는 컴포넌트를 보여주는 방법을 찾아보던중 Outlet을 알게되어서 설명하고자합니다.

Outlet에 대해 더 알아보고싶으시면, 해당 링크를 참고해주세요.
https://reactrouter.com/docs/en/v6/components/outlet (그렇게 자세하게 나와있지는 않네요..!)

예시 코드

저는 Header,Nav,Footer 부분이 공통 부분이라 저렇게 넣어주었고, 각자 자신이 원하는 공통의 컴포넌트를 넣어주면됩니다. Outlet은 페이지에 따라 바뀌는 부분입니다.

import Footer from '@/components/Footer';
import Header from '@/components/Header';
import Nav from '@/components/Nav';
import { Outlet } from 'react-router-dom';

const MainLayout = () => {
  return (
    <>
      <Header />
      <Nav />
      <Outlet />
      <Footer />
    </>
  );
};

export default MainLayout;

그 다음 아까 정의해둔 MainLayout(공통으로 사용되는 Header,Footer,Nav을 적어둔 코드)이 필요한 부분에는 <Route element={<MainLayout />}> 안에 해당하는 Outlet 대신에 들어가야할 코드를 중첩하여 감싸줍니다.

예시 코드에서 Outlet에는 MainPage에 해당하는 코드들이 들어가게됩니다.

const routes = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* Header,Footer,Nav을 보여주고 싶은 컴포넌트 */}
        <Route element={<MainLayout />}>
          <Route path="/" element={<MainPage />} />
        </Route>
        {/* Header,Footer,Nav을 안 보여주고 싶은 컴포넌트 */}
        <Route path="/sign-up" element={<SignUpPage />} />
        <Route path="/login" element={<LoginPage />} />
      </Routes>
    </BrowserRouter>
  );
};

끝!