[TIL #37 ] react-router-dom Outlet

이번 팀프로젝트를 하면서 새로운 도전을 시도하는중이다.
매번 쓰던 version의 router가 아닌 새로운 버전의 router를 써보기로 하였는데, 이게 익히기전엔 이해하기가 어렵다가 알고나니 유용하더라.

---

outlet

React Router v6에서 도입된 새로운 개념으로, 중첩된 라우팅 구조를 구성할 수 있도록 해주는 컴포넌트로, 보통 라우팅 컴포넌트 내부에서 사용되며, 중첩된 자식 라우트가 렌더링되는 위치를 지정할 수 있다.

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,

    children: [
      {
        path: '/',
        element: <Main />,
  		} 
        ],
      },
    ],
  },
]);

//app.js
function App() {
  return <RouterProvider router={router} />;
}

export default App;

---

쓰던 방법

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
    	<Header />
        <Route path='/a-page' element={<PageA />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

이렇게 작성하면 모든 페이지들이 Header가 나오게 되어 추후에 다른 페이지들을 라우팅 할 때도 굉장히 복잡해진다.

v6의 라우터 outlet

Outlet은 중첩 라우팅을 통해 상위 컴포넌트를 레이아웃화 할 수 있고 {children}을 사용하는 것과 같은 효과가 난다.

import React from 'react'
import { Outlet } from 'react-router-dom'
import { Header } from './Header'

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

공식 문서 React router v6-outlet