개요

위의 페이지에서 /list 로 라우팅 했을 때 하위 컴포넌트만 렌더링 시키기 위해 중첩라우팅을 사용할 수 있다.

중첩 라우팅을 구현하는 두 가지 방법에 대해 작성하겠다.

와일드 카드 *

//App.js

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import './style.css';
import Main from './components/Main';

export default function App() {
  return (
    <div>
      <Routes>
        <Route path="/*" element={<Main />} />
      </Routes>
    </div>
  );
}

path의 뒤에 와일드카드인 * 을 넣으면 뒤에 추가 path가 들어온다고 명시하는 것이다.

//Main.js

import React from 'react';
import { Link, Routes, Route } from 'react-router-dom';
import List from './List';
const Main = () => {
  return (
    <div>
      <h1>Hello World!</h1>
      <p>Start editing to see some magic happen :)</p>
      <Link to="/list">
        <button>to LIST</button>
      </Link>
      <Routes>  // 부모 컴포넌트에서 라우팅해준다
        <Route path="list" element={<List />} />
      </Routes>
    </div>
  );
};

export default Main;

부모 컴포넌트에서 라우팅을 해주면 url 이동 시 부모컴포넌트 하위에 path와 일치하는 컴포넌트가 렌더링된다.

Outlet

react-router-dom v6에 추가 된 기능이라고 한다.
props로 children을 받는 것과 비슷한 기능이라고 이해하면 좀 더 빠를듯하다.

// App.js

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import './style.css';
import Main from './components/Main';
import List from './components/List';

export default function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Main />}>
          <Route path="list" element={<List />} />
        </Route>
      </Routes>
    </div>
  );
}

부모 컴포넌트 안에 Route를 추가해준다.

// Main.js

import React from 'react';
import { Link, Outlet } from 'react-router-dom';
const Main = () => {
  return (
    <div>
      <h1>Hello World!</h1>
      <p>Start editing to see some magic happen :)</p>
      <Link to="/list">
        <button>to LIST</button>
      </Link>
      <Outlet />
    </div>
  );
};

export default Main;

부모 컴포넌트의 컴포넌트 위치에 path와 일치하는 컴포넌트가 렌더링된다.

Outlet을 사용하면 와일드 카드를 썼을 때 보다 개인적으로 Outlet을 이용한 방식이 더욱 가독성이 좋아보인다.
와일드카드를 사용한 중첩 라우팅 방식은 내부에서 라우팅을 해주기 때문에 코드 가독성이 떨어진다.