React-router-dom을 활용한 페이지 라우팅(디테일 페이지)

패키지 설치

yarn add react-router-dom

폴더 및 파일 생성하기

📦 
├─ .env ✅
├─ .eslintrc.cjs
├─ .gitignore
├─ README.md
├─ index.html
├─ package.json
├─ public
│  └─ vite.svg
├─ src
│  ├─ App.tsx
│  ├─ api
│  │  └─ api.ts ✅
│  ├─ main.tsx
│  ├─ pages
│  │  ├─ SponsorDetail.tsx ✅
│  │  └─ SponsorList.tsx ✅
│  ├─ routes
│  │  └─ routes.tsx ✅
│  └─ vite-env.d.ts
├─ tsconfig.app.json
├─ tsconfig.json
├─ tsconfig.node.json
├─ vite.config.ts
└─ yarn.lock

✅ 표시가 처음 세팅한 내용.

페이지 라우팅 설정하기

// src/routes/routes.tsx

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import SponsorDetail from '../pages/SponsorDetail';
import SponsorList from '../pages/SponsorList';

const AppRoutes = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<SponsorList />} />
        <Route path="/detail/:id" element={<SponsorDetail />} />
      </Routes>
    </Router>
  );
};

export default AppRoutes;

• 모듈 import하기
  • import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
  • 페이지 라우팅 할 페이지들
• 함수형 컴포넌트 세팅
  • <Router> 안에 <Routes> 안에 실제 페이지인 <Route> 들.

App 컴포넌트 라우트 호출

// src/App.tsx

import AppRoutes from './routes/routes';

function App() {
  return <AppRoutes />;
}

export default App;

실제 페이지 작성

• url 파라미터로 내용을 주고 받는 페이지가 아닌 곳은 그냥 작성하면 됨.
• url 파라미터를 전달받는 페이지의 설정에서는 useParams 훅으로 라우팅 설정한 곳에서 :id 같은 url 파라미터 중 페이지에서 받아와야 하는 것을 구조 분해 할당 해서 꺼내와야 함.

// src/pages/URL 파라미터를 받는 페이지.tsx

import { useParams } from 'react-router-dom';

const SponsorDetail = () => {
    const { id } = useParams<{ id: string }>();
    return (
        <h1>Sponsor Detail Page for ID: {id}</h1>
    )
};

export default SponsorDetail;