동적라우팅 Dynamic Routing

taeheech·2020년 8월 9일

동적라우팅이란? 라우트의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것 (Dynamic Routing)

React Router에서는 두 가지 방법으로 유동 라우팅 기능 구현 가능

1. Query parameters

2. URL parameters

https://velog.io/@joonsikyang/React-Project-URL-parameters-Query-parameters

라우트로 설정한 컴포넌트들이 넘겨받는 3가지 props

history 객체

push, replace 를 통해 다른 경로로 이동
this.props.history.push('/page')

location 객체

현재 경로에 대한 정보
URL 쿼리 (/company_list?category=3)에 대한 정보

match 객체

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

쉽게 말하자면 routes.js 에서 불러온 컴포넌트들은 routes컴포넌트의 자식 컴포넌트가 되는 것이고,
routes컴포넌트는 그 자식 컴포넌트들에게 3가지 객체를 props로 전달한다.
그것들이 history, location, match 이다.

0개의 댓글