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