동적 라우팅 이란?

라우팅이란 다른 경로(주소)에 따라 다른 View(화면)을 보여주는 것 입니다.
React Router 에서는 두 가지 방법을 통해 유동 라우팅 기능을 구현할 수 있습니다.
Query parameters
URL parameters

1. Query parameters

location

this.props.location을 통해서 URL 주소의 정보를 가지고 올 수 있습니다.

해당 URL에서 필요한 key값을 추출하여, 백엔드와 데이터 통신을 하고, 백엔드와 통신한 데이터로 원하는 정보를 페이지에 담을 수 있습니다.

/filter?type=book&sort_by=date
다양한 옵션을 주어서 조회를 할 때 사용한다.
(검색할 때 필터 기능; ex. book이라는 type을 가진 데이터들을 날짜 순으로 보여줌)

2. URL parameters

match
params 정보는 this.props.match.params를 통해 가지고 올 수 있습니다.
params 데이터를 사용하기 위해서는 Route.js에서 라우트 설정을 조금 수정해야 합니다.
Route exact path 뒤에 /:id를 붙여주면 해당 컴포넌트에서 this.props.match.params.id를 통해 해당 값을 가지고 올 수 있습니다.

/profiles/sangho
id, username 처럼 정해진 특정 데이터를 조회할 때 많이 사용한다.

라우트로 설정한 컴포넌트의 3가지 props

컴포넌트를 라우트로 설정하게 되면 3가지의 props를 전달받는다.

• 1.history
  이 객체를 통해서 push, replace로 다른 경로로 이동하거나 앞 뒤 페이지로 전환할 수 있다. 컴포넌트 이동시에 this.props.history.push('/page')를 사용했던 것을 기억하면 된다.

• 2.location
  이 객체는 현재 경로에 대한 정보를 지니고 있고, URL 쿼리 (/company_list?category=12)에 대한 정보를 가지고 있다.

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