Question

67494 просмотра

1 ответ

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

прохождение реквизита из приложения
используя объект окна
создание маршрутов для вложенных дочерних компонентов

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

Автор: xiaofan2406 Источник Размещён: 12.11.2019 09:27

Answer 1

92 плюса

Решение

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

Вы можете использовать withRouterHOC для того , чтобы ввести 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

Вы можете использовать withRouterHOC для того , чтобы ввести 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
 }

Автор: QoP Размещён: 30.05.2016 10:44

response-router получает this.props.location в дочерних компонентах

Ответы (1)

Вопросы из категории :