React Router

상품 목록에서 상품 상세 페이지는 path 속성으로 변경하는 것 아니고, 해당하는 상품의 id 값으로 컴포넌트를 호출해서 불러온다. 아래의 예제 코드에서 path에서 /detail 설정 시 해당 컴포넌트로 이동하지만 정확하게 어떤 것을 보여줄지는 지정하지 않는다.

상품 목록 페이지에서 상품을 클릭하면 상세 페이지로 넘어가는 기능은 path 속성으로 변경한다고 되는 것 아니다.

동적 라우팅(Dynamic Routing)

동적 라우팅은 Route 경로에 특정 값을 넣어서 해당 페이지로 이동할 수 있게 해준다. 컴포넌트를 라우터 설정하면 아래의 3가지의 props을 전달 받는다.

history

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

location

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

match

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