React Router 중첩 라우팅 실습

React Router 공식 템플릿은 타입스크립트를 기반으로 파일 중심의 라우팅 구성을 제공합니다. 이 글에서는 /about 및 /contact 페이지를 새로 추가하고, 이를 중첩 라우팅 구조로 확장하는 과정을 설명합니다.

1. 새 라우트 컴포넌트 생성

// app/routes/about.tsx
export default function About() {
  return <h2>소개 페이지입니다</h2>;
}

// app/routes/contact.tsx
export default function Contact() {
  return <h2>문의 페이지입니다</h2>;
}

2. routes.ts 설정 확장

path() 함수는 실험적 모듈에서 제공되지 않기 때문에 객체 형식으로 작성합니다.

import { type RouteConfig, index } from "@react-router/dev/routes";

export default [
  index("routes/home.tsx"),
  {
    path: "about",
    file: "routes/about.tsx"
  },
  {
    path: "contact",
    file: "routes/contact.tsx"
  }
] satisfies RouteConfig;

3. root.tsx에서 네비게이션 메뉴 확장

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

export default function Root() {
  return (
    <div>
      <h1>My App</h1>
      <nav>
        <Link to="/home">Home</Link> |
        <Link to="/welcome">Welcome</Link> |
        <Link to="/about">About</Link> |
        <Link to="/contact">Contact</Link>
      </nav>
      <hr />
      <Outlet />
    </div>
  );
}

4. 기타 에러 해결

• react-router-dom 모듈 에러: npm install react-router-dom
• 타입스크립트 타입 에러: npm install --save-dev @types/react-router-dom
• 파일 오타 수정: contect.tsx → contact.tsx로 이름 수정

5. 테스트

• /about 페이지 접속 시 "소개 페이지입니다" 출력
• /contact 페이지 접속 시 "문의 페이지입니다" 출력
• 모든 페이지가 root.tsx 레이아웃 아래 <Outlet>을 통해 렌더링됨

결론

React Router의 공식 템플릿을 기반으로 라우트 구성은 RouteConfig를 통해 타입 안전하게 정의할 수 있으며, 이를 통해 실용적인 구조의 중첩 라우팅을 손쉽게 구현할 수 있습니다.