<Route element={<Container />}> {/* 공통 컨테이너 적용 */}

<Routes>
  <Route element={<Container />}>  {/* 공통 컨테이너 적용 */}
    <Route path="/" element={<Home />} />  {/* 메인 경로 */}
    <Route path="/about" element={<About />} />  {/* 'about' 경로 */}
    <Route path="/contact" element={<Contact />} />  {/* 'contact' 경로 */}
  </Route>
</Routes>

 

 

위의 예시에서는 <Container />가 공통적인 요소로 사용됩니다. Routes 안에서 <Route element={<Container />}>로 여러 경로를 감싸면, Container 내부에 여러 경로의 컴포넌트가 렌더링됩니다.

• Home, About, Contact 등의 컴포넌트가 각 경로에서 렌더링되지만, 공통적으로 <Container />의 레이아웃을 공유합니다.
• 이렇게 하면 코드 재사용이 용이하고, 애플리케이션의 레이아웃을 중앙 집중화할 수 있습니다.