React Router Dom으로 페이지를 분기마다 처리하는데 다른 페이지라도 같은 layout을 적용하고 싶은 경우가 있다. 아래와 같이 사용한다면 react router dom을 써서 분기처리하더라도 같은 layout을 적용한 페이지들을 볼 수 있다.

Router 설정

Router.tsx

<Route element={<MainLayout />}>
   <Route element={<HomePage />} path="/" />
   <Route element={<MyPage />} path="/mypage" />
</Route>
          

페이지를 분기한 Route 태그들을 상위 Route태그로 감싼다.

상위 Route태그의 element값에 하위 route 태그 페이지에 설정할 layout 컴포넌트를 작성한다.

Layout 설정

MainyLayout.tsx

import React from 'react';
import { Outlet } from 'react-router-dom';

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

export default MainLayout;

layout 컴포넌트를 만들어서 return 값에 <Outlet />를 적어준다.