동적 라우팅

이나영·2021년 10월 19일
0

React

목록 보기
9/10

1. Path Parameter

<Route exact path="/users/:id" component={Users} />"

<User /> 컴포넌트 내에서는 pathid값을 this.props.match.params.id로 받아 사용할 수 있다.

2. Query Parameter

localhost:8000/product?limit=10&offset=5

// 페이지네이션
// ?: 쿼리 시작을 알림
// limit: 한 페이지의 데이터 수
// offset: 데이터 시작 위치

?limit=10&offset=5 부분은 this.props.location.search로 받아 사용할 수 있다.

3. 제공 객체

React Route는 아래와 같은 객체들을 자체 제공한다. 단, 이들을 사용하기 위해서는 withRouter 함수가 필수임을 명심해야 한다.

1) history

: 페이지 이동을 위한 여러 method들을 담고 있다.
ex. push

2) match

: Path Parameter에 관한 정보를 담고 있다.

3) location

: 현재 url 경로에 관한 정보를 담고 있다.

0개의 댓글