3. 라우터

페이지 만들기

/src 폴더 하위에 /src/pages 폴더를 생성합니다.

IndexPage.tsx, DetailPage.tsx  페이지 컴포넌트를 /src/pages 하위에 생성합니다.

• IndexPage.tsx : 포켓몬 목록을 표시합니다.

• DetailPage.tsx : 포켓몬의 id 를 파라미터로 전달받아 선택한 포켓몬의 상세 정보를 표시합니다.

src/pages/IndexPage.tsx

import React from 'react';

const IndexPage: React.FC = () => (
  <div>Index Page</div>
)

export default IndexPage;

src/pages/DetailPage.tsx

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

type Params = {
  id: string;
}

const DetailPage: React.FC = () => {
  const {id} = useParams<Params>();
  
  return (
    <div>Detail Page id: {id}</div>
  )
}

export default DetailPage;

라우터 설정

src/App.tsx

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

import IndexPage from './pages/IndexPage';
import DetailPage from './pages/DetailPage';

function App() {
  return (
      <Routes>
          <Route index element={<IndexPage />} />
          <Route path="/:id" element={<DetailPage />} />
      </Routes>
  );
}

export default App;

src/pages/IndexPage.tsx

src/pages/DetailPage.tsx