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
}