🤭
megaptera
CtrlK
  • megaptera-front
  • 1주차
    • 1. Environment
    • 2. TypeScript
    • 3. React
    • 4. Testing Library
    • 5. Parcel & ESLint
  • 2주차
    • 1. JSX
  • 3주차
    • 1. React Component
    • 2. React State
    • 3. Thinking in React
  • 4주차
    • 1. Express
    • 2. Fetch API & CORS
    • 3. React Hooks
    • 4. useRef & Custom Hook
    • 5. usehooks-ts
  • 5주차
    • 1. TDD
    • 2. React Testing Library
    • 3. MSW
    • 4. Playwright
  • 6주차
    • 1. External Store
    • 2. TSyringe
    • 3. Follow Redux
    • 4. usestore-ts
  • 7주차
    • 1. Routing
    • 2. Routes
    • 3. Router
    • 4. Navigation
    • 5. React Router Dom
  • 8주차
    • 1. Design System
    • 2. Style Basics
    • 3. CSS in JS
    • 4. styled-components
    • 5. props and attrs
    • 6. Global Style & Theme
  • 9주차
    • 1. 개발하기 전 준비
    • 2. 목록 보기
    • 3. 상품 상세 보기
    • 4. 장바구니 보기
    • 5. 장바구니에 상품 담기
  • 10주차
    • 1. 로그인
    • 2. 로그아웃
    • 3. 회원가입
    • 4. 주문 목록 & 주문 상세
  • 11주차
    • 1. 배송 정보 입력
    • 2. 포트원 결제 요청
    • 3. 배송 정보 입력
  • 12주차
    • 1. 관리자 웹 사이트 개발 시작
    • 2. 로그인, 사용자 목록
    • 3. 카테고리 관리
Powered by GitBook
On this page
  • 정리
  • useParams
  1. 7주차

5. React Router Dom

  • react-router-dom

정리

강의 내용 외에도 react-router-dom에 대해 정리해본다.

useParams

URL의 파라미터를 가져와 활용하고 싶다면 useParams 훅을 사용한다. 예를 들어, router에서 /users/:id 이렇게 라우터 경로를 설정했다고 하면

http://localhost:3000/users/1 이라는 URL에서 아래와 같이 1을 가져올 수 있다.

const {id} = useParams()
Previous4. NavigationNext8주차

Last updated 2 years ago