react-router-dom 6v Outlet 사용하기

리액트 라우터의 6v에는 Outlet이라는 기능이있다.
내 상황에선 header를 노출시키지만
특정 페이지(로그인, 회원가입)에서는 노출시키지 않고 싶었다.
Outlet의 사용방법은 간단하다.

App.js(라우트 페이지)

	<Router>
      <Routes>
        <Route element={<Header />}>
          <Route path="/" element={<Home />} />
          <Route path="/write" element={<Write />} />
          <Route path="/detail" element={<Detail />} />
        </Route>

        <Route path="/signin" element={<Signin />} />
        <Route path="/signup" element={<Signup />} />
      </Routes>
    </Router>

Header 컴포넌트를 렌더링 하는 Route를 만든 후
Header 컴포넌트를 포함하는 페이지들을 감싸준다.
이걸 중첩 라우팅이라고 한다.

그리고 Header의 컴포넌트에서 Outlet을 import 해준 다음 사용하면 된다.

Header.js(Header 컴포넌트 페이지)

import { Link, Outlet } from 'react-router-dom';
	<>
      <Container>
        <Link to="/signin">
          <button>로그인</button>
        </Link>
        <Link to="/signup">
          <button>회원가입</button>
        </Link>
      </Container>
      <Outlet />
    </>

Outlet을 써주는 위치에 따라 컴포넌트가 보이기도 안보이기도 하는것을 보면
써주는 위치도 고려를 해줘야하는 부분같다.