reactjs - method - react-router obteniendo this.props.location en componentes secundarios

redirect react router v4

Question

Según tengo entendido, <Route path="/" component={App} /> proporcionará elementos relacionados con el enrutamiento de la App , como location y params . Si mi componente de la App tiene muchos componentes secundarios anidados, ¿cómo consigo que el componente secundario tenga acceso a estos accesorios sin:

• pasando accesorios de la aplicación
• usando el objeto ventana
• crear rutas para componentes secundarios anidados

Pensé que this.context.router tendría información relacionada con las rutas, pero this.context.router parece tener solo algunas funciones para manipular las rutas.

Answer 1

(Actualización) V4

Puede usar withRouter HOC para inyectar match , history y location en los accesorios de sus componentes.

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)

(Actualización) V3

Puede usar withRouter HOC para inyectar router , params , location , routes en los accesorios de sus componentes.

class Child extends React.Component {

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

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

export default withRouter(Child)

Respuesta original

Si no desea utilizar los accesorios, puede usar el contexto como se describe en la documentación de React Router

Primero, debe configurar sus childContextTypes y getChildContext

class App extends React.Component{

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

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

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

Luego, podrá acceder al objeto de ubicación en los componentes secundarios usando el contexto de esta manera

class Child extends React.Component{

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

}

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