web-dev-qa-db-fra.com

react-router récupère this.props.location dans les composants enfants

Si j'ai bien compris, <Route path="/" component={App} /> donnera App accessoires liés au routage comme location et params. Si mon composant App comporte de nombreux composants enfants imbriqués, comment puis-je obtenir que le composant enfant ait accès à ces accessoires sans:

  • en passant les accessoires de l'App
  • en utilisant l'objet window
  • création d'itinéraires pour les composants enfants imbriqués

Je pensais que this.context.router aurait des informations relatives aux routes, mais this.context.router ne semble avoir que quelques fonctions pour manipuler les routes.

javascriptreactjsreact-router
52
xiaofan2406

(Mise à jour) V4 & V5

Vous pouvez utiliser withRouter HOC pour injecter match , history et location dans les accessoires de votre composant.

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 pour injecter router , params , location , routes dans les accessoires de votre composant.

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

Si vous ne souhaitez pas utiliser les accessoires, vous pouvez utiliser le contexte comme décrit dans la documentation de React Router .

Tout d’abord, vous devez configurer vos 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 pourrez accéder à l'objet location dans vos composants enfants en utilisant le contexte comme ceci

class Child extends React.Component{

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

}

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