[React] nested route(라우트 중첩), outlet

Next에서 nested routes를 사용하려면 pages에서 폴더안에 폴더를 만들어 index.tsx 파일을 만들어 주면 쉽게 구현할 수 있다.

React는 그런 기능이 없기 때문에 Outlet을 사용하여 따로 설정을 해주어야 한다.

nested route(라우트 중첩)이란?

Route로 다른 Route들을 감싸는 것을 라우트 중첩이라고 한다.

예를 들어 마이페이지에서 내 정보를 보고싶은 경우, 중첩 라우팅을 사용한 접속 경로는 아래와 같다.

localhost:3000/mypage
localhost:3000/mypage/profile

Outlet

중첩 라우팅을 사용하려면 상위 Route 컴포넌트에 Outlet을 추가해주어야 한다.

Outlet이 작성된 위치에 하위 컴포넌트들이 위치하게 된다.

import React from 'react';
import { Link, Outlet } from 'react-router-dom';

const Mypage = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/profile">Profile</Link>
        </li>
        <li>
          <Link to="/review">Review</Link>
        </li>
      </ul>
      <Outlet />    //이 위치에 <Profile />과 <Review />가 위치하게 됨
    <nav/>
  );
};

export default Mypage;

그리고 Route를 설정해주는 파일에서 중첩 라우팅이 필요한 부분에 아래와 같이 적용시켜준다.

import { Route, Routes } from "react-router-dom";
import Home from "./Home";
import Mypage from "./Mypage";
import Profile from "./Profile";
import Review from "./Review";

export default function App() {
  return (
    <Routes>
      <Route path="home" element={<Home />} />
  
      <Route paht="mypage" element={<Mypage />}>
        <Route path="profile" element={<Profile />} />
        <Route path="review" element={<Review />} />
      </Route>
    </Routes>
  );
}

export default App;

Outlet 대신 와일드 카드 사용

Outlet 대신 와일드 카드를 사용해서 mypage/ 주소 뒤에 무언가 더 올 수 있다고 명시를 해줄 수 있다.

import { Route, Routes } from "react-router-dom";
import Home from "./Home";
import Mypage from "./Mypage";
import Profile from "./Profile";
import Review from "./Review";

export default function App() {
  return (
    <Routes>
      <Route path="home" element={<Home />} />
      <Route paht="mypage/*" element={<Mypage />} />	// 와일드 카드 사용
    </Routes>
  );
}

export default App;

이후 해당 컴포넌트로 가서 서브 페이지로 렌더링할 Routes와 Route를 작성해주면 된다.

import React from 'react';
import { Link, Route, Routes } from 'react-router-dom';

const Mypage = () => {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/profile">Profile</Link>
          </li>
          <li>
            <Link to="/review">Review</Link>
          </li>
        </ul>
      <nav/>
      <Routes>
        <Route path="profile" element={<Profile />} />
        <Route path="review" element={<Review />} />
      </Routes>
    </>
  );
};

export default Mypage;