Me gustaría mostrar un title en <AppBar /> que de alguna manera se pasa desde la ruta actual.
En React Router v4, ¿cómo podría <AppBar /> pasar la ruta actual a su prop de title ?
<Router basename='/app'> <main> <Menu active={menu} close={this.closeMenu} /> <Overlay active={menu} onClick={this.closeMenu} /> <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' /> <Route path='/customers' component={Customers} /> </main> </Router> ¿Hay alguna manera de pasar un título personalizado desde un prop personalizado en <Route /> ?
En la versión 5.1 de react-router hay un enlace llamado useLocation , que devuelve el objeto de ubicación actual. Esto puede ser útil en cualquier momento que necesite conocer la URL actual.
import { useLocation } from 'react-router-dom' function HeaderView() { const location = useLocation(); console.log(location.pathname); return <span>Path : {location.pathname}</span> }En el enrutador de reacción 4, la ruta actual está en this.props.location.pathname . Solo obtenga this.props y verifique. Si aún no ve location.pathname , entonces debe usar el decorador withRouter .
Esto podría parecerse a esto:
import {withRouter} from 'react-router-dom'; const SomeComponent = withRouter(props => <MyComponent {...props}/>); class MyComponent extends React.Component { SomeMethod () { const {pathname} = this.props.location; } }Si está utilizando plantillas de reacción, donde el final de su archivo de reacción se ve así: export default SomeComponent , necesita usar el componente de orden superior (a menudo denominado "HOC"), withRouter .
Primero, necesitarás importar withRouter así:
import {withRouter} from 'react-router-dom'; A continuación, querrá usar withRouter . Puede hacer esto cambiando la exportación de su componente. Es probable que desee cambiar de export default ComponentName a export default withRouter(ComponentName) .
Luego puede obtener la ruta (y otra información) de los accesorios. Específicamente, location , match e history . El código para escupir el nombre de la ruta sería:
console.log(this.props.location.pathname);Un buen artículo con información adicional está disponible aquí: https://reacttraining.com/react-router/core/guides/philosophy