# Router: match, location, history

## 1. Route Props

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

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

![history, location, match 속성을 전달 받는 것을 확인](/files/-MXulevRtgWBNwsxKPj3)

### 1.1 match

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

![](/files/-MXun-eA8zTHaP-9bYCu)

* **path →** 라우터에 정의된 path
* **url →**&#xC2E4;제 클라이언트로부터 요청된 url path
* **isExact →** true일 경우 전체 경로가 완전히 매칭될 때 요청을 수행
* **params →** url path로 전달된 파라미터 객체 (JSON 객체)
  * `?key=value`

### 1.2 location&#x20;

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

![](/files/-MXun9Yzy5XzMiztrqsr)

* **pathname →** 현재 페이지의 경로명
* **search** → 현재 페이지의 query string
* **hash** → 현재 페이지의 hash

### 1.3 history

![](/files/-MXunFX8Wzw3B4cIj29o)

* **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 동작을 제어


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/react/react-router/what-is-react-router/router-match-location-history.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.