Outlet

// Articles.js
import React from 'react'
import { Link, Outlet } from 'react-router-dom'

function Articles() {
  return (
    <div>
      {/* Route의 children으로 들어가는 JSX 엘리먼트를 보여주는 Outlet(여기서는 Article) */}
      <Outlet />
      <ul>
        <li>
          <Link to='/articles/1'>게시글 1</Link>
        </li>
        <li>
          <Link to='/articles/2'>게시글 2</Link>
        </li>
        <li>
          <Link to='/articles/3'>게시글 3</Link>
        </li>
      </ul>
    </div>
  )
}

export default Articles

// Article.js
import React from 'react'
import { useParams } from 'react-router-dom'

function Article() {
  const {id} = useParams();
  return (
    <div>
      <h2>게시글 {id}</h2>
    </div>
  )
}

export default Article

// App.js
import React from 'react'
import { Route, Routes } from 'react-router-dom'
import About from './pages/About'
import Article from './pages/Article'
import Articles from './pages/Articles'
import Home from './pages/Home'
import Profile from './pages/Profile'

function App() {
  return (
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/about' element={<About />} />
      <Route path='/profiles/:username' element={<Profile />} />
      {/* 중첩 라우터 구현 */}
      <Route path='articles' element={<Articles/>}>
        <Route path=':id' element={<Article />} />
      </Route>
    </Routes>
  )
}

export default App

// Home.js
import React from 'react'
import { Link } from 'react-router-dom'

function Home() {
  return (
    <div>
      <h1>홈</h1>
      <p>가장 먼저 보여지는 페이지</p>
      <ul>
        <li>
          <Link to='/about'>소개</Link>
        </li>
        <li>
          <Link to='/profiles/velopert'>velopert의 프로필</Link>
        </li>
        <li>
          <Link to='/profile/gildong'>gildong의 프로필</Link>
        </li>
        <li>
          <Link to='/profiles/void'>존재하지 않는 프로필</Link>
        </li>
        {/* 홈 화면에 게시글 목록 링크 추가 */}
        <li>
          <Link to='/articles'>게시글 목록</Link>
        </li>
      </ul>
    </div>
  )
}

export default Home

• Outlet은 Route의 children으로 들어가는 JSX 엘리먼트를 보여줌
  • 위 코드에서 Artielces 위에 Outlet 추가
  • 만약 Outlet Route의 children이 많으면 해당 path에 맞는 children만 출력

Layout

// App.js
import React from 'react'
import { Route, Routes } from 'react-router-dom'
import Layout from './Layout'
import About from './pages/About'
import Article from './pages/Article'
import Articles from './pages/Articles'
import Home from './pages/Home'
import Profile from './pages/Profile'

function App() {
  return (
    <Routes>
      {/* Layout을 element만 이용해서 넣기 */}
      <Route element={<Layout />}>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/profiles/:username' element={<Profile />} />
      </Route>
      {/* 아래처럼 사용도 가능 */}
      <Route path='/' element={<Layout />}>
        {/* index는 상위 path와 동일한 path값 가짐 */}
        <Route index element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/profiles/:username' element={<Profile />} />
      </Route>

      <Route path='articles' element={<Articles/>}>
        <Route path=':id' element={<Article />} />
      </Route>
    </Routes>
  )
}

export default App

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

function Layout() {
  return (
    <div>
      <header style={{background: 'lightgray', padding: 16, fontSize: 24}}>
        Header
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  )
}

export default Layout

• Layout이 들어갈 페이지들을 Layout Route의 children으로 둠
• Outlet으로 일치하는 path에 따라 원하는 children 출력
• Layout의 path를 비우고 element만 사용해도 가능
  • Layout의 path를 줬다면 Home Route에 index 프로퍼티 추가
    • index는 상위 Route의 path를 그대로 이용