Router

다중 페이지 라우팅 매칭 맵

URL은 BrowserRouter 안의 Routes에서 가장 맞는 Route로 연결되고, 동적 파라미터와 중첩 Outlet을 통해 페이지가 구성된다.

요청 경로가 화면으로 바뀌는 순서

route match

BrowserRouter

브라우저 히스토리와 URL 변경을 React에 연결한다.

Routes

자식 Route 중 현재 URL에 맞는 경로를 찾는다.

동적 파라미터

:postId 값은 useParams로 페이지에서 읽는다.

Fallback

매칭되지 않은 경로는 404 페이지로 보낸다.

URLRoutesRoute matchPage/OutletNotFound
라우팅 흐름 해석

라우터 설정은 위에서 아래 코드보다 경로 구조를 먼저 봐야 한다. 동적 경로와 404 경로의 위치를 명확히 둔다.