Router: match, location, history

1. Route Props

Route는 3개의 Props를 컴포넌트에 전달한다. 아래 BrowsePage 컴포넌트는 App.js에서 <Route> 설정이 된 컴포넌트이다. BrowsePage 컴포넌트에서 props를 콘솔에 출력해보니 history, location, match 객체를 전달 받는 것을 확인할 수 있다.

function BrowsePage(props) {
  console.log(props)
}

history, location, match 속성을 전달 받는 것을 확인

1.1 match

match 객체는 path, url이 매칭 된 정보가 담겨 있다. 대표적으로 match.params를 가져온다.

• path → 라우터에 정의된 path

• url →실제 클라이언트로부터 요청된 url path

• isExact → true일 경우 전체 경로가 완전히 매칭될 때 요청을 수행

• params → url path로 전달된 파라미터 객체 (JSON 객체)

  • ?key=value

1.2 location

현재 페이지의 정보가 담겨있다. 대표적으로 location.search로 현재 url의 쿼리 스트링을 가져온다.

• pathname → 현재 페이지의 경로명

• search → 현재 페이지의 query string

• hash → 현재 페이지의 hash

1.3 history

• length → 전체 history 스택의 길이

• action → 최근에 수행된 action (PUSH, REPLACE or POP)

• location → 최근 경로 정보(JSON 객체)

• push(path, [state]) → 새로운 경로를 history 스택으로 푸시하여 페이지를 이동

• replace(path, [state]) → 최근 경로를 history 스택에서 교체하여 페이지를 이동

• go(n) → history 스택의 포인터를 n번째로 이동

• goBack() → 이전 페이지로 이동

• goForward() → 앞 페이지로 이동

• block(prompt) → history 스택의 PUSH/POP 동작을 제어