React 如何进行路由变化监听

一、使用`react-router`库（以`react-router-dom`为例）

1. 历史（`history`）对象监听

1.1 原理

`react-router`内部使用`history`对象来管理路由历史记录。可以通过访问`history`对象来监听路由变化。在基于类的组件中，可以通过组件的`props`获取`history`对象；在函数式组件中，可以使用`useHistory`钩子函数获取。

1.2 示例（基于类的组件）

javascript 复制代码

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 示例（函数式组件）

javascript 复制代码

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 示例

javascript 复制代码

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 示例（以哈希路由为例）

javascript 复制代码

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`事件监听器。当哈希路由发生变化时，就会打印出当前的哈希值。注意，在返回的清理函数中，要移除添加的监听器，以避免内存泄漏。