React-router-dom: Outlet에 대하여

<Outlet>을 사용하게 되면 컴포넌트가 중첩(nested router)되었을 경우, 상위 컴포넌트는 유지되면서 하위 컴포넌트만 렌더링할 수 있다. UI의 일관성은 유지하면서 특정 부분만 업데이트 할 수 있다. 

 

Outlet 사용하기

1. 유지되어야 하는 상위 컴포넌트에 Outlet을 사용한다. 

해당 예제에서는 유지되어야 하는 부분은 타이틀과 페이지 이동 버튼이다. 

import { NavLink, Outlet } from "react-router-dom"
import styles from "./css/Page.module.css"

export default function Page() {
    const activeStyle = {
        color: "purple",
    }

    return (
        <div className={styles.box}>
            <h1>코딩쥐의 티스토리 예제</h1>
            <h2>페이지 이동 버튼</h2>
            <div>
                <NavLink to={'/'} className={styles.link} style={({ isActive }) => isActive ? activeStyle : undefined}>Intro</NavLink>
                <NavLink to={'/home'} className={styles.link} style={({ isActive }) => isActive ? activeStyle : undefined}>Home</NavLink>
                <NavLink to={'/about'} className={styles.link} style={({ isActive }) => isActive ? activeStyle : undefined}>About</NavLink>
            </div>
            <div className={styles.content}>
                <Outlet />
            </div>
        </div>

    )
}

 

2. 중첩된 <Route>를 정의한다. 

상위 컴포넌트를 element로 갖는 <Route> 안에 하위 컴포넌트를 element로 갖는 <Route>를 삽입한다.

import Home from './components/Home'
import About from './components/About'
import { Route, Routes, Link } from 'react-router-dom'
import Intro from './components/Intro'
import Page from './components/Page.jsx'

function App() {

  return (
    <div>
      <Routes>
        <Route path={'/'} element={<Page />}>
        //index를 작성하여 처음 보여지는 화면을 설정한다. 
          <Route index element={<Intro />} />
          <Route path={'/home'} element={<Home />} />
          <Route path={'/about'} element={<About />} />
        </Route>
      </Routes>
    </div>
  )
}

export default App