[인턴쉽 온보딩] 라우트 아울렛 (Route Outlet)

Outlet이란?

React Router v6에서 사용되며, 주로 중첩된 라우트 구조에서 사용된다

 

app 엘리먼트 라우트 안에 다른 라우트들이 들어있으면(중첩) 

<Routes>
  <Route path="/" element={<App />}>
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="dashboard" element={<MyPage />} />
  </Route>
</Routes>

 

 

메인태그 안에 아울렛 컴포넌트가 앱 엘리먼트 라우트 안에 속한 다른 라우트들이 보여진다 

Abot이랑 MyPage가 한 번에 보이는 것

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

const AuthLayout = () => {

  return (
    <div>
      <h1>Auth Layout</h1>
      <p>반드시 로그인이 되어있어야 하는 페이지입니다.</p>
      <Navigation />
      <main>
        <Outlet />
      </main>
    </div>
  );
};

export default AuthLayout;

 

 

아울렛을 통해 중첩 라우트를 편리하게 사용할 수 있다

1. 한 번에 여러 페이지가 보여야 할 경우

2. 로그인 상태와 비로그인 상태를 구별해 보여야 할 경우