router essentials

React Router 렌더 조건

BrowserRouter, Routes, Route, Link, useParams, Outlet의 역할을 구분하면 기본 라우팅과 중첩 라우팅을 같은 모델로 읽을 수 있습니다.

route table

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

navigation

Link와 NavLink는 페이지 새로고침 없이 History stack을 갱신합니다.

nested route

부모 Route의 element 안에서 Outlet이 자식 화면이 들어올 자리를 만듭니다.

base

BrowserRouter가 앱 루트를 감싸는지 확인합니다.

경로

정적 경로와 동적 :id 경로의 우선순위를 읽습니다.

param

useParams 값은 문자열이므로 필요한 변환을 합니다.

active

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