React 如何进行路由变化监听
一、使用`react-router`库（以`react-router-dom`为例）
1. 历史（`history`）对象监听
1.1 原理
`react-router`内部使用`history`对象来管理路由历史记录。可以通过访问`history`对象来监听路由变化。在基于类的组件中，可以通过组件的`props`获取`history`对象；在函数式组件中，可以使用`useHistory`钩子函数获取。
1.2 示例（基于类的组件）
import React from "react";
import { withRouter } from "react-router-dom";
class MyComponent extends React.Component {
componentDidMount() {
this.props.history.listen((location, action) => {
console.log("路由发生变化，新位置:", location);
console.log("路由变化的动作:", action);
});
}
render() {
return <div>这是一个组件</div>;
}
}
export default withRouter(MyComponent);在这里，`componentDidMount`生命周期方法中，通过`this.props.history.listen`来添加一个路由变化的监听器。每当路由发生变化时，就会打印出新的位置（`location`）和路由变化的动作（`action`，如`PUSH`、`REPLACE`等）。
1.3 示例（函数式组件）
import React from "react";
import { useHistory } from "react-router-dom";
function MyComponent() {
const history = useHistory();
React.useEffect(() => {
const unlisten = history.listen((location, action) => {
console.log("路由发生变化，新位置:", location);
console.log("路由变化的动作:", action);
});
return () => {
unlisten();
};
}, [history]);
return <div>这是一个函数式组件</div>;
}
export default MyComponent;在函数式组件中，使用`useHistory`钩子获取`history`对象，然后在`useEffect`钩子中添加监听器。同时，返回一个清理函数，用于在组件卸载时移除监听器。
2. `useLocation`钩子监听（推荐用于函数式组件）
2.1 原理
`useLocation`是`react-router-dom`提供的一个钩子函数，它返回当前的`location`对象。通过比较前后`location`对象的变化，可以检测到路由是否发生了变化。
2.2 示例
import React from "react";
import { useLocation } from "react-router-dom";
function MyComponent() {
const location = useLocation();
React.useEffect(() => {
console.log("当前路由位置:", location);
}, [location]);
return <div>这是一个函数式组件</div>;
}
export default MyComponent;在这里，`useEffect`钩子依赖`location`对象。每当`location`发生变化（即路由变化）时，`useEffect`中的回调函数就会被执行，打印出当前的路由位置。
3. 自定义事件监听（不依赖`react-router`内部机制）
3.1 原理
在顶层组件（如`App`组件）中，通过`window`对象的`addEventListener`方法监听`hashchange`（对于哈希路由）或`popstate`（对于 HTML5 历史记录路由）事件来检测路由变化。这种方法比较底层，需要自己处理更多的细节，比如区分不同类型的路由和处理事件冒泡等问题。
3.2 示例（以哈希路由为例）
import React from "react";
function App() {
React.useEffect(() => {
const handleHashChange = () => {
console.log("哈希路由发生变化，当前哈希:", window.location.hash);
};
window.addEventListener("hashchange", handleHashChange);
return () => {
window.removeEventListener("hashchange", handleHashChange);
};
}, []);
return <div>{/* 路由相关组件和内容 */}</div>;
}
export default App;在`App`组件的`useEffect`钩子中，添加了一个`hashchange`事件监听器。当哈希路由发生变化时，就会打印出当前的哈希值。注意，在返回的清理函数中，要移除添加的监听器，以避免内存泄漏。