Реагировать-маршрутизатор, получая this.props.location в дочерних компонентах

Как я понимаю, <Route path="/" component={App} /> предоставит App связанные с маршрутизацией реквизиты, такие как location и params. Если у моего компонента App есть много вложенных дочерних компонентов, как получить дочерний компонент для доступа к этим реквизитам без:

Я думал, что this.context.router будет иметь некоторую информацию, связанную с маршрутами, но this.context.router, похоже, имеет только некоторые функции для управления маршрутами.

Ответы

Ответ 1

(Обновление) V4 и V5

Вы можете использовать withRouter HOC для withRouter 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)

Оригинальный ответ

Если вы не хотите использовать реквизит, вы можете использовать контекст, как описано в документации 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
 }