[React] 서브 라우트

📍 서브 라우트
라우트 내부에 또 라우트를 정의하는 것을 의미한다.

📍 서브 라우트 사용법
그냥 라우트로 사용되고 있는 컴포넌트 내부에 Route 컴포넌트를 또 사용하면 된다.

기존 App 컴포넌트에서는 두 종류의 프로필 링크를 보여 줬음.

이를 잘라내서 프로필 링크를 보여주는 Profiles라는 라우트 컴포넌트를 따로 만들고, 그 안에서 Profile 컴포넌트를 서브 라우트로 사용하도록 해보자!

① Profiles 컴포넌트 만들기

• Profiles.jsx

import React from "react";
import { Link, Route, Routes } from "react-router-dom";
import Profile from "./Profile";

const Profiles = () => {
  return (
    <div>
      <h3>사용자 목록:</h3>
      <ul>
        <li>
          <Link to="/profiles/developer">developer</Link>
        </li>
        <li>
          <Link to="/profiles/baseballTeam">baseballTeam</Link>
        </li>
      </ul>

      {/* 프로필 서브 라우트 추가 */}
      <Routes>
        <Route path="/" element={<div>사용자를 선택해 주세요.</div>} />
        <Route path=":username" element={<Profile />} />
      </Routes>
    </div>
  );
};

export default Profiles;

② App.jsx 수정하기

• App.jsx

import React from "react";
import { Routes, Route, Link } from "react-router-dom"; // Link 사용 임포트
import "./App.css";
import About from "./About";
import Info from "./Info";
import Home from "./Home";
// import Profile from "./Profile";
import Profiles from "./Profiles";

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li> 
        <li>
          <Link to="/profiles">프로필</Link>
        </li>
      </ul>
      <hr />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/info" element={<Info />} />
     <Route path="/profiles/*" element={<Profiles />} />
      </Routes>
    </div>
  );
};

export default App;