reactjs – 反应路由器在子组件中获取this.props.location

据我了解< Route path =“/”component = {App} />将给出与应用路由相关的道具,如位置和参数.如果我的应用程序组件有许多嵌套的子组件,我如何使子组件能够访问这些道具,而不需要:

从应用程序传递道具
>使用窗口对象
>为嵌套子组件创建路由

我以为this.context.router会有一些与路由有关的信息,但this.context.router似乎只有一些功能来操纵路由.

(更新)V4

您可以使用withRouter HOC,以便在组件道具中注入match,historylocation.

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)

原来的答案

如果您不想使用道具,可以使用React Router documentation中所述的上下文

首先,你必须设置你的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
 }
相关文章
相关标签/搜索