[ReactJs] react-router 고차 컴포넌트인 withRouter 사용

react-router 고차 컴포넌트인 withRouter 사용

1. withRouter

- 컴포넌트에서 router 에 접근하는 방법 중 하나이다.

- 정적 클래스 속성인 contextTypes 를 설정하여 this.context.router 로 접근하는 방법 보다는 withRouter 로 접근하는 방법을 선호한다.

- withRouter 는 고차 컴포넌트로 컴포넌트를 인자로 받아 router 에 주입하고 다른 컴포넌트를 반환한다.

2. 사용예

const {withRouter} = require('react-router') <Router history={hashHistory}> <Route path="/" component={Content} > <Route path="/about" component={About} /> <Route path="/contact" component={withRouter(Contact)}/> ..... </Route> </Router>

1) 컴포넌트에서 접근

- 함수의 첫 번째 인자로 전달된 객체의 속성을 통해 router 객체에 접근한다.

const React = require('react') module.exports = function Contact(props){ props.router - Good return <div>.....