react-router가 자식 구성 요소에서 this.props.location을 가져옵니다.

react-router가 자식 구성 요소에서 this.props.location을 가져옵니다.

---

내가 이해하는대로 및 같은 라우팅 관련 소품을 <Route path="/" component={App} />제공합니다 . 내 구성 요소에 중첩 된 하위 구성 요소가 많이있는 경우 하위 구성 요소가 다음없이 이러한 소품에 액세스하도록하려면 어떻게해야합니까?ApplocationparamsApp

• 앱에서 소품 전달
• 창 개체 사용
• 내포 된 하위 구성 요소에 대한 경로 작성

this.context.router경로와 관련된 정보가있을 거라고 생각했는데 경로 this.context.router를 조작하는 기능 만있는 것 같습니다.

---

(업데이트) V4 및 V5

당신은 사용할 수 있습니다 withRouter주입하기 위해 HOC를 match, history그리고 location구성 요소 소품이다.

class Child extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>{location.pathname}</div>
    )
  }
}

export default withRouter(Child)

(업데이트) V3

당신이 사용할 수있는 withRouter주입하기 위해 HOC를 router, params, location, routes구성 요소 소품이다.

class Child extends React.Component {

  render() {
    const { router, params, location, routes } = this.props

    return (
      <div>{location.pathname}</div>
    )
  }
}

export default withRouter(Child)

원래 답변

props를 사용하지 않으려면 React Router 문서에 설명 된대로 컨텍스트를 사용할 수 있습니다.

먼저 설정해야합니다 당신 childContextTypes과getChildContext

class App extends React.Component{

  getChildContext() {
    return {
      location: this.props.location
    }
  }

  render() {
    return <Child/>;
  }
}

App.childContextTypes = {
    location: React.PropTypes.object
}

그러면 다음과 같은 컨텍스트를 사용하여 하위 구성 요소의 위치 개체에 액세스 할 수 있습니다.

class Child extends React.Component{

   render() {
     return (
       <div>{this.context.location.pathname}</div>
     )
   }

}

Child.contextTypes = {
    location: React.PropTypes.object
 }

참조 URL : https://stackoverflow.com/questions/37516919/react-router-getting-this-props-location-in-child-components