[TIL][React]동적라우팅

Bohyeon Koo·2021년 2월 14일
0

React

목록 보기
7/7
post-thumbnail

동적 라우팅

라우트의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것

Query parameters

url의 주소가 /company_list?category=3 인 경우
this.props.location을 통해서 해당 주소의 정보를 가지고 올 수 있음.

URL parameters

어떤 라우트에 매칭이 되었는지에 대한 정보가 있고 params (/company_detail/:id) 정보를 가지고 있음.

세 가지 props

라우트로 설정한 컴포넌트는 3가지 props를 전달받게 된다.

history

push, replace 를 통해 다른 경로로 이동하거나 앞 뒤 페이지로 전환

location

현재 경로에 대한 정보를 지니고 있고, URL 쿼리 (/company_list?category=3)에 대한 정보도 가지고 있음.

match

이 객체에는 어떤 라우트에 매칭이 되었는지에 대한 정보가 있고 params (/company_detail/:id) 정보를 가지고 있음.

사용 용도

String parameters

페이지에 여러 정보 필요할 때 / 필터링할 때 / 유지보수 측면

Query parameters

딱 하나의 정보만 필요한 경우

0개의 댓글