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

Question

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

• en 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 être la seule à avoir quelques fonctions pour manipuler les routes.

Answer 1

(Mise À Jour) V4

Vous pouvez utiliser withRouter HOC afin d'injecter match, history et location 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 router, params, location, routes 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 la 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
 }