¿Cómo escuchar los cambios de ruta en reaccionar enrutador v4?
Tengo un par de botones que actúan como rutas. Cada vez que se cambia la ruta, quiero asegurarme de que el botón que está activo cambie.
¿Hay alguna manera de escuchar los cambios de ruta en el enrutador de reacción v4?
Yo suelo withRouterconseguir el locationaccesorio. Cuando el componente se actualiza debido a una nueva ruta, verifico si el valor cambió:
@withRouter
class App extends React.Component {
static propTypes = {
location: React.PropTypes.object.isRequired
}
// ...
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
this.onRouteChanged();
}
}
onRouteChanged() {
console.log("ROUTE CHANGED");
}
// ...
render(){
return <Switch>
<Route path="/" exact component={HomePage} />
<Route path="/checkout" component={CheckoutPage} />
<Route path="/success" component={SuccessPage} />
// ...
<Route component={NotFound} />
</Switch>
}
}
v5.1 introduce el útil ganchouseLocation
https://reacttraining.com/blog/react-router-v5-1/#uselocation
import { Switch, useLocation } from 'react-router-dom'
function usePageViews() {
let location = useLocation()
useEffect(
() => {
ga.send(['pageview', location.pathname])
},
[location]
)
}
function App() {
usePageViews()
return <Switch>{/* your routes here */}</Switch>
}
Para ampliar lo anterior, deberá acceder al objeto histórico. Si está utilizando BrowserRouter, puede importar withRoutery empaquetar su componente con un componente de orden superior (HoC) para tener acceso a través de accesorios a las propiedades y funciones del objeto histórico.
import { withRouter } from 'react-router-dom';
const myComponent = ({ history }) => {
history.listen((location, action) => {
// location is an object like window.location
console.log(action, location.pathname, location.state)
});
return <div>...</div>;
};
export default withRouter(myComponent);
Lo único que hay que tener en cuenta es que withRouter y la mayoría de las otras formas de acceder historyparecen contaminar los accesorios a medida que desestructuran el objeto.
Como han dicho otros, esto ha sido reemplazado por los ganchos expuestos por el enrutador de reacción y tiene una pérdida de memoria. Si está registrando oyentes en un componente funcional, debe hacerlo a través de useEffect y cancelar su registro en el retorno de esa función.
withRouter, history.listeny useEffect(React Hooks) funcionan bastante bien juntos:
import React, { useEffect } from 'react'
import { withRouter } from 'react-router-dom'
const Component = ({ history }) => {
useEffect(() => history.listen(() => {
// do something on route change
// for my example, close a drawer
}), [])
//...
}
export default withRouter(Component)
La devolución de llamada del oyente se activará cada vez que se cambie una ruta, y el retorno history.listenes un controlador de apagado que funciona bien con useEffect.
