프로젝트를 진행하다 보면 물론 Layout들이 모두 동일하게 적용될 수도 있지만, url마다 다른 Layout을 적용해야 될 때가 있다. 이런 상황일 때 react-router-dom 을 사용해서 특정 url에 다른 레이아웃이 적용되도록 한번 해보자.

🧑🏻‍💻 createBrowserRouter, Outlet 사용해서 레이아웃 나누기.

createBrowserRouter는 react router v6.4부터 사용할 수 있다.

createBrowserRouter()에다 라우팅을 할 path와 element를 적용해서 작성할 수 있다. children 속성으로 중첩된 라우터(겹치는 레이아웃들)를 추가해 줄 수 있다.

Router.tsx 파일 세팅하기.

// Router.tsx
import { createBrowserRouter } from 'react-router-dom';
import About from '../pages/About';
import Home from '../pages/Home';
import Layout from '../layout/layout';

// 주의할 점은 children 배열에 있는 path에 `/`를 추가하면 안된다.
const router = createBrowserRouter(
[
    {
		// 라우팅 할 path url은 /layout1
        path: '/layout1',
      	// 적용할 레이아웃 선언하기.
        element: <Layout />,
        children: [
      {
      	// path를 '/'로 하면 안된다. 그럼 아예 다른 경로가 지정됨.
        path: '',
        element: <Home />,
      },
      {
        // path를 about으로 해주면 url: /layout1/about으로 해주면 <About> 컴포넌트가 보여진다.
        path: 'about',
        element: <About />,
      },
    ],
  },
]);

export default router;

부모 path에 Outlet 적용시켜주기.

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

const Layout = () => {
    return (
        <div>
            <h1>Header</h1>     
      		// children 배열에 들어있는 컴포넌트들 넣어주기.
            <Outlet/>
            <h1>Bottom</h1>
        </div>
    );
};

export default Layout;

Router.tsx에 적용한 컴포넌트 코드(간단하게)

// Home.tsx
const Home = () => {
    return (
        <div>
            <h2>path = 기본 입니다.</h2>
        </div>
    );
};

export default Home;

// About.tsx
import React from 'react';

const About = () => {
    return (
        <div>
           <h2> path = About 입니다.</h2>
        </div>
    );
};

export default About;

결과

path -> /layout 일 때

path -> /layout/about 일 때