React Router : Nested Router

• <Router> 태그 안에는 <Router> 태그가 속할 수 있다.
• 이 경우 <Router> 내의 페이지 안에 하위 경로를 설정하여 지정할 수 있는데 이것을 Nested Router 라고 한다.

두가지 방법으로 설정할 수 있다.

1. Wrapping (Outlet)

부모 <Route> 태그로 자식 태그 <Route> 를 감싸주고 부모 라우터 컴포넌트에 <Outlet> 태그를 넣어 활성화 시켜준다. <Outlet> 태그가 들어가는 위치에 자식 Route 가 랜더링 된다.

예제

페이지 Home 안에 page1, page2, page3 을 넣어 랜더링 시키는 코드를 만들자!

function App() {


  return (
    <div>

      <ul>
        <li> <NavLink to={"/"}>Intro</NavLink></li>
        <li> <NavLink to={"/Home"}>Home</NavLink></li>
        <li> <NavLink to={"/Home/Page1"}>Page1</NavLink></li>
        <li> <NavLink to={"/Home/Page2"}>Page2</NavLink></li>
        <li> <NavLink to={"/Home/Page3"}>Page3</NavLink></li>
      </ul>

      <Routes>
        <Route path='/' element={<Intro />}></Route>

        <Route path='/Home' element={<Home />}>
          <Route index element={<Page1 />}></Route>
          <Route path='/Home/Page2' element={<Page2 />}></Route>
          <Route path='/Home/Page3' element={<Page3 />}></Route>
          <Route path='*' element={<h1>이것은 잘못된 경로입니다</h1>}></Route>
        </Route>

      </Routes>

    </div>
  )
}

export default App

자식 라우터에 index 를 넣어주면 디폴트로 보여지는 페이지가 된다. 여기서는 page1을 설정하였다.

부모 Route 안에 <Outlet> 태그를 넣어 랜더링 시켜준다.

import {Outlet} from 'react-router-dom'

function Home(){
    return(
        <div>
            <h1>이것은 Home</h1>
            <Outlet/>
        </div>
    )
}

export default Home

❗❗❗ 위에서 보듯 index를 넣은 Page1 는 링크를 누르면 잘못된 경로라고 뜬다.
Index Route는 부모 Route Url에서 랜더링 되는 Outlet이기 때문이다.

---

2. /*

부모 Route path의 뒤에 /* 를 붙여 해당 Route 내부에 또다른 Route가 중첩될 수 있음을 명시해준다.
/* => 해당 경로 뒤에 오는 모든 경로가 적용 된다는 뜻이다.

function App() {


  return (
    <div>

      <ul>
        <li> <NavLink to={"/"}>Intro</NavLink></li>
        <li> <NavLink to={"/Home"}>Home</NavLink></li>
        <li> <NavLink to={"/Home/Page1"}>Page1</NavLink></li>
        <li> <NavLink to={"/Home/Page2"}>Page2</NavLink></li>
        <li> <NavLink to={"/Home/Page3"}>Page3</NavLink></li>
      </ul>

      <Routes>
        <Route path='/' element={<Intro />}></Route>
        <Route path='/Home/*' element={<Home />}></Route>
      </Routes>

    </div>
  )
}

export default App

위 코드에서
<Route path='/Home/*' element={<Home />}></Route> 을 통해 Home/으로 시작하는 모든 URL에서 이 랜더링 된다.

부모 Route
부모 Route 안에 자식 Route를 작성해준다.
상대 경로를 제공하기에 path=/home/page1 이 아닌 path=page1 으로 적어줘도 된다.

function Home() {
    return (
        <div>
            <h1>이것은 Home</h1>
            <Routes>
                <Route path='' element={<p>아직 아무것도..</p>}></Route>
                <Route path='Page1' element={<Page1 />}></Route>
                <Route path='Page2' element={<Page2 />}></Route>
                <Route path='Page3' element={<Page3 />}></Route>
                <Route path='*' element={<h1>이것은 잘못된 경로입니다</h1>}></Route>
            </Routes>
        </div>
    )
}

/*을 쓰는 경우 디폴트로 보여줄 컴포넌트는 path=''로 적어주면 된다.