React Router로 라우팅 마스터하기 ② - useParams

 

React Router로 라우팅 마스터하기 ①

 

지난 포스팅에 이어서 이번에는 URL에 포함된 파라미터를 추출하여 각기 다른 세부 정보를 보여주는 페이지를 구현해보려 한다.

 

 

 

useParams 사용해 보기

• React Router에서 URL 파라미터 값을 가져오는 훅(Hook)
• :videoId 같은 동적 경로 변수에 들어온 값을 컴포넌트 안에서 쉽게 가져올 수 있게 해준다.

 

App.jsx

import { createBrowserRouter, RouterProvider } from "react-router";
import Root from "./pages/Root"
import Home from "./pages/Home"
import NotFound from "./pages/NotFound"
import Videos from "./pages/Videos"
import VideoDetail from './pages/VideoDetail';
import './App.css'

const router = createBrowserRouter([
  {
    path: "/",                     // URL 주소
    element: <Root />,             // 보여줄 컴포넌트
    errorElement: <NotFound />,    // 에러가 발생했을 때 보여줄 컴포넌트
    children: [
      {
        index: true,               // 해당 경로의 기본 컴포넌트로 사용
        element: <Home />
      },
      {
        path: "/videos",
        element: <Videos />
      },
      {
        path: "/videos/:videoId",   // URL 파라미터(videoId) 선언
        element: <VideoDetail />
      },
    ]
  }
])

function App() {
  return (
    <RouterProvider router={router} />
  )
}

export default App

 

VideoDetail.jsx

import { useParams } from 'react-router'

export default function VideoDetail() {
  const { videoId } = useParams();
  
  return <div>VideoDetail: {videoId}</div>
}

 

실행 화면

파라미터에 직접 id를 입력해 줘야 VideoDetail 페이지에 접근할 수 있다.

실행 화면(VideoDetail)

 

 

 

폴더 구조

📦src
 ┣ 📂assets
 ┣ 📂components
 ┃ ┗ 📜Navbar.jsx
 ┣ 📂pages
 ┃ ┣ 📜Home.jsx
 ┃ ┣ 📜NotFound.jsx
 ┃ ┣ 📜Root.jsx
 ┃ ┣ 📜VideoDetail.jsx
 ┃ ┗ 📜Videos.jsx
 ┣ 📜App.css
 ┣ 📜App.jsx
 ┣ 📜index.css
 ┗ 📜main.jsx

 

 

 

공식 문서 참고

useParams

useParams | React Router