réagir routeur à l'obtention de ce.accessoires de jeu.l'emplacement de l'enfant composants

Que je comprends <Route path="/" component={App} /> sera donne App de routage liés à des accessoires comme location et params. Si mon App composant a beaucoup de imbriqués les composants enfants, comment puis-je obtenir le composant enfant d'avoir accès à ces accessoires sans:

  • passant accessoires à partir de l'App
  • à l'aide de la fenêtre de l'objet
  • création d'itinéraires pour imbriqués les composants enfants

J'ai pensé this.context.router aurait des informations sur les itinéraires, mais this.context.router semble avoir seulement quelques fonctions pour manipuler les routes.

  • En Application de la Composante directe imbriquée composant enfant peut être trouver en.accessoires de jeu.les enfants
InformationsquelleAutor xiaofan2406 | 2016-05-30
  1. 84

    (Mise à jour) V4 & V5

    Vous pouvez utiliser withRouter HOC afin d'injecter de la match, histoire et localisation dans votre composant d'accessoires. 

    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)

    (Mise À Jour) V3

    Vous pouvez utiliser withRouter HOC afin d'injecter de la routeur, params, localisation, itinéraires dans votre composant d'accessoires. 

    class Child extends React.Component {

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

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

export default withRouter(Child)

    Réponse originale à cette question

    Si vous ne voulez pas utiliser les accessoires, vous pouvez utiliser le cadre comme décrit dans Réagir la documentation du Routeur

    Tout d'abord, vous devez configurer votre childContextTypes et getChildContext

    class App extends React.Component{

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

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

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

    Ensuite, vous serez en mesure d'accéder à l'emplacement de l'objet dans votre enfant composants à l'aide de la contexte comme celui-ci

    class Child extends React.Component{

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

}

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