React Router

React Router 라우팅 매칭 구조

React Router는 Link로 URL을 바꾸고, Routes가 현재 경로에 맞는 Route 컴포넌트를 선택한다.

URL 변경이 컴포넌트 선택으로 이어지는 과정

route match

BrowserRouter

브라우저 히스토리와 React 라우팅 상태를 연결한다.

Link/NavLink

새로고침 없이 URL을 변경해 라우팅을 시작한다.

Routes/Route

현재 URL과 path를 비교해 렌더할 컴포넌트를 고른다.

중첩/파라미터

Outlet과 useParams로 하위 화면과 동적 값을 다룬다.

Link clickURLRoutesRoute elementOutlet/params
라우팅 흐름 해석

라우터는 페이지 이동을 “상태 변경”으로 다룬다. URL 구조와 컴포넌트 구조를 함께 설계해야 한다.