Tengo un componente principal, la App que contiene todos mis componentes Match . Me gustaría poder mostrar la página actual en la parte superior (en el encabezado, por ejemplo), pero tengo problemas para obtener la ruta actual.
En la App tengo:
App.contextTypes = { history: React.PropTypes.object, };Y paso el nombre de la ruta actual a un componente:
<Header currentPathname={this.context.history.location.pathname} /> Sin embargo, la App no parece actualizarse cuando cambia la ubicación. ¿Cómo puedo escuchar esto y pasar como un accesorio?
Presumiblemente, desea que su encabezado se muestre en todas las rutas, si lo coloca encima de sus componentes Match . En ese caso, también use Match para su encabezado y haga coincidir cada patrón y tendrá acceso a location a través de props .
<Match pattern="/" component={props => <Header pathname={props.location.pathname} />} />Match ya no es un componente en react-router-dom (^4.3.1). En cambio, hice esto:
<Route path="" component={(props) => <Header {...props} page={"Main Page"} />}/>
En Encabezado.js:
const Header = (props) => ( <header className="App-header"> { console.log(props) } <img src={logo} className="App-logo" alt="logo"/> <TitleDiv>App Name : {props.page}</TitleDiv> </header> ); El resultado es App Name : Main Page