使用useHistory().listen监听路由变化
在使用react的函数组件时,有时候我们会想监听路由变化,并在路由变化时进行某些操作,就需要使用useHistory().listen
来实现了。
下面是使用方法
const history = useHistory();
useEffect(() => {
const unlisten = history.listen((historyLocation) => {
cnosole.log(historyLocation)
});
return () => {
unlisten();
};
}, [history]);
这里要注意useEffect
要返回listen
这个方法,将其卸载。如果写成下面这种形式
const history = useHistory();
useEffect(() => {
history.listen((historyLocation) => {
cnosole.log(historyLocation)
});
}, [history]);
会导致listen
方法一直挂载,即便当前组件已经销毁或页面已经跳转,这个方法也会一直监听路由的变化,每当路由发生改变,里面的cnosole.log
就会跟着执行一边。