라우터 선택 기준

Routes와 element 렌더링

React Router 코드는 to, path, element, param을 연결해 읽으면 된다. 링크 클릭과 코드 이동 모두 같은 매칭 흐름으로 들어간다.

기본 라우팅 구성 요소

route match

브라우저 주소와 히스토리 변경을 React 앱 안으로 연결한다.

새로고침 없이 URL을 바꾸고, NavLink는 active 상태도 알려준다.

현재 URL과 path를 비교해 element에 지정한 컴포넌트를 선택한다.

폼 제출 뒤 홈으로 이동하는 것처럼 코드에서 주소를 바꾼다.

product/:id처럼 경로 안의 값을 페이지 컴포넌트에서 읽는다.

어떤 path와도 맞지 않으면 별표 경로가 404 화면을 맡는다.

URL 흐름

click URL Routes element render