react-router在子组件中获取this.props.location

问题描述

根据我的理解< Route path =/component = {App} /> 将提供 App 路由相关的道具，如 location 和 params 。如果我的 App 组件有许多嵌套的子组件，如何让子组件无需访问这些道具：

As I understand <Route path="/" component={App} /> will gives App routing-related props like location and params. If my App component has many nested child components, how do I get the child component to have access to these props without:

• 使用窗口对象从App


• 传递道具


• 为嵌套子组件创建路径

我认为 this.context.router 会有一些与路线相关的信息，但 this.context.router 似乎只有一些函数来操纵路线。

I thought this.context.router would have some information related to the routes, but this.context.router seems to only have some functions to manipulate the routes.

推荐答案

（更新）V4

您可以使用 HOC为了注入，和。

You can use withRouter HOC in order to inject match, history and location in your component props.

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

您可以使用 HOC，以便注入，， ，你的组件道具。

You can use withRouter HOC in order to inject router, params, location, routes in your component props.

class Child extends React.Component {

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

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

export default withRouter(Child)

原始答案

如果您不想使用道具，可以使用

If you don't want to use the props, you can use the context as described in 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
}

然后，您将能够使用像这样的上下文访问子组件中的位置对象

Then, you will be able to access to the location object in your child components using the context like this

class Child extends React.Component{

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

}

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

这篇关于react-router在子组件中获取this.props.location的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！