React Router URL 매칭

BrowserRouter, Routes, Route, Link, useParams, Outlet을 함께 보면 기본 라우팅과 중첩 라우팅이 같은 모델로 읽힙니다.

React Router URL 매칭BrowserRouter, Routes, Route, Link, useParams, Outlet을 함께 보면 기본 라우팅과 중첩 라우팅이…
1

경로 선언

Routes 안의 Route 경로와 element가 URL 패턴에 맞는 화면 컴포넌트를 정합니다.

2

이동 링크

Link와 NavLink는 전체 새로고침 없이 브라우저 기록과 현재 경로를 갱신합니다.

3

중첩 화면

부모 Route의 element 안에서 Outlet이 현재 중첩 경로에 맞는 자식 화면을 끼워 넣습니다.

4

base

BrowserRouter가 앱 렌더링 루트를 감싸는지 확인한다.

5

param

useParams로 받은 동적 값이 문자열임을 고려한다.

핵심React Router URL 매칭은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.