라우터 지도

React Router URL 매칭

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

경로 선언

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

이동 링크

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

중첩 화면

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

base

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

param

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

active

NavLink 활성 상태가 현재 URL과 맞는지 본다.

outlet

중첩 Route의 부모 컴포넌트에 Outlet이 있는지 확인한다.