[ React ] react-router-dom의 outlet으로 layout 구성하기

중첩 라우팅 시에 Outlet 영역에 렌더링할 컴포넌트를 넣어준다고 한다.

(※ 중첩되지 않은 경우에는 적용되지 않음 !)

 

쉽게 생각하면 url이 부모와 자식 구조를 가지고 있을 때 (ex. /parent → /parent/child), 부모 컴포넌트에 작성한 <Outlet> 은 자식 컴포넌트가 들어갈 위치를 의미한다.

 

나는 Nav바와 Content영역으로 나뉘어진 레이아웃을 구성하고자 Outlet을 활용했다.

 

우선 라우터 구조를 App 엘리멘트 하위에 나머지 route가 중첩되도록 바꿔줬다.

그러나 로그인 페이지에는 Nav바를 포함하지 않을 것이기 때문에 App Route 외부에 작성했다.

const Router = () => {
  const browserRouter = createBrowserRouter(
    createRoutesFromElements(
      <>
        <Route path={PATH.app} element={<App />} errorElement={<ErrorPage />}>
          <Route path={PATH.myPage} element={<MyPage />} />
          <Route path={PATH.schedule} element={<SchedulePage />} />
        </Route>
        <Route path={PATH.login} element={<Login />} />
      </>,
    ),
  );
  return <RouterProvider router={browserRouter}></RouterProvider>;
};

 

그 다음 App 컴포넌트에 원하는 레이아웃 구조를 짜고 Content 영역에 Outlet 태그를 써줬다.

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

function App() {
  return (
    <FullScreen>
      <Nav />
      <Container>
        <Outlet />
      </Container>
    </FullScreen>
  );
}

 

 

굿

 

---

[ 참고 자료 ]

[React] 중첩 라우팅, Outlet 사용법