react如何监听路由变化
监听路由变化的方法
在React中监听路由变化可以通过多种方式实现，具体取决于使用的路由库（如React Router）或原生浏览器API。
使用React Router的useEffect和useLocation
React Router v5及以上版本提供了useLocation钩子，可以结合useEffect监听路由变化：
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
function MyComponent() {
const location = useLocation();
useEffect(() => {
console.log('路由变化:', location.pathname);
// 执行路由变化后的逻辑
}, [location]);
return <div>当前路径: {location.pathname}</div>;
}使用React Router的history.listen
如果需要在非组件环境中监听路由变化（例如Redux store），可以通过history对象直接监听：
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
history.listen((location, action) => {
console.log('路由变化:', action, location.pathname);
});
// 在Router中传入自定义history
<Router history={history}>
{/* 路由配置 */}
</Router>使用浏览器原生API
在不依赖React Router的情况下，可以通过原生popstate事件监听浏览器路由变化：
useEffect(() => {
const handleRouteChange = () => {
console.log('路由变化:', window.location.pathname);
};
window.addEventListener('popstate', handleRouteChange);
return () => window.removeEventListener('popstate', handleRouteChange);
}, []);使用React Router v6的useNavigation
React Router v6提供了useNavigation钩子，可以监听导航状态（如加载、提交等）：
import { useNavigation } from 'react-router-dom';
function MyComponent() {
const navigation = useNavigation();
console.log('当前导航状态:', navigation.state);
return null;
}注意事项
- 依赖项：使用
useEffect时，确保将监听依赖（如location）添加到依赖数组中。 - 清理：在组件卸载时移除事件监听或取消订阅，避免内存泄漏。
- 性能：避免在路由变化时执行高开销操作，必要时使用防抖或节流优化。
