중첩된 라우트

중첩된 라우트 형태

const App = () => {
  return (
    <Routes>
      <Route path="/articles" element={<Articles />}>
        <Route path=":id" element={<Article />} />
      </Route>
    </Routes>
  );
};

중첩된 라우트는 Route 안에 Route를 쓰는 형태로 이루어져 있다. 이렇게 하면 두 개의 컴포넌트를 동시에 렌더링 할 새로운 컴포넌트를 만들 필요 없이 한 번에 렌더링 할 수 있다.

Outlet

그럼 Articles 안에서 Article 컴포넌트가 보여지기 위해서는 어떻게 해야할까? 우선 Article 컴포넌트가 들어갈 위치를 정해야한다. 그 후에 <Outlet/>을 들어갈 위치에 작성하면 렌더링이 잘 된다.

const Articles = () => {
  return (
    <div>
      <Outlet />
      //여기에 children인 Article 컴포넌트가 보여진다.
      <ul>
        <li>
          <Link to="/articles/1">게시글 1</Link>
        </li>
        <li>
          <Link to="/articles/2">게시글 2</Link>
        </li>
      </ul>
    </div>
  );
}

velopert - React Router v6 튜토리얼