라우터 연결 구조

Router 감싸기

앱 최상단에 BrowserRouter를 두어 history와 URL 변화를 React가 읽게 한다.

history

Routes 아래 path와 element를 연결해 URL별 화면을 정의한다.

match

a 태그 새로고침 대신 Link로 클라이언트 라우팅을 수행한다.

client nav

useParams와 search params로 URL의 동적 값을 화면 로직에 연결한다.

URL state

중첩

공통 레이아웃은 부모 Route와 Outlet으로 표현한다. header, sidebar, tab layout을 중복 작성하지 않는다.

nested UI

NavLink

현재 경로에 맞는 활성 스타일이 필요하면 NavLink를 쓴다. 단순 이동은 Link로 충분하다.

active state

보호

인증이 필요한 경로는 렌더 전에 권한 상태를 확인한다. 리다이렉트 루프와 로딩 상태를 같이 설계한다.

guard

새로고침 배포 환경에서 하위 경로 새로고침이 서버 404로 가지 않는다.

파라미터 없는 id나 잘못된 query 값의 fallback 화면이 있다.

접근성 현재 페이지 링크 상태와 focus 이동이 사용자에게 드러난다.

<Routes>
  <Route 경로="/posts/:id" element={<PostPage />} />
</Routes>