react history.listen 详解
[react history.listen 详解]
在React应用中，路由是一个重要的概念，用来控制应用的导航和页面切换。React Router是一个常用的路由库，在其 v5 版本中，引入了`history.listen`方法，用于监听路由的变化并执行相应的操作。本文将详细解释`history.listen`的用法和原理。
1. `history`概览
在深入分析`history.listen`之前，我们先了解一下`history`对象。`history`是React Router的一个核心概念，用于管理应用的会话历史。其是基于浏览器`history` API 的封装，由React Router内部创建和维护。
`history`对象具有以下主要方法和属性：
- `push(path, state)`: 将新的路径加入历史堆栈，并导航到新页面。
- `replace(path, state)`: 替换当前路径，并导航到新页面。
- `go(n)、goBack()、goForward()`: 前往、返回、前进到历史中的不同页面。
- `listen(listener)`: 监听路由的变化。
2. 路由监听的需求
在很多场景下，我们需要根据不同的路由变化做一些特定的操作，比如：
- 在切换页面时，更新页面上的数据。
- 监听用户行为，统计页面访问量。
- 路由变化时，发送请求，获取相关数据。
以上需求都可以通过`history.listen`来实现。
3. `history.listen`详解
`history.listen`方法接受一个回调函数作为参数，当路由发生变化时，回调函数将被触发。该回调函数包含了一个`location`对象，该对象包含当前路径信息和历史堆栈中存储的状态。
javascript
history.listen((location, action) => {
  执行自定义操作
});
回调函数的参数`location`和`action`分别代表当前的路径信息和路由的变化动作。react router 6
- `location`对象有以下属性：
  - `pathname`: 表示当前路径的字符串。
  - `search`: 表示URL中的查询字符串部分。
  - `hash`: 表示URL中的哈希值部分。
  - `state`: 表示历史堆栈中存储的状态。
- `action`表示路由的变化动作：
  - `PUSH`: 添加新路径到历史堆栈。
  - `REPLACE`: 替换当前路径。
  - `POP`: 返回到历史堆栈中的上一个路径。
有了以上的基本概念，我们可以开始编写并利用`history.listen`来处理特定的路由变化需求。
4. 使用`history.listen`处理特定需求
# 4.1 更新页面数据
在某些情况下，当路由发生变化时，我们需要更新页面上的数据。这可以通过在`history.listen`中调用相应的方法来实现。
javascript
history.listen((location, action) => {
  fetchData(location.pathname);  根据路径获取数据
});
上述代码监听路由的变化，当路由变化时，调用`fetchData`方法，并将当前路径作为参数。我们可以在`fetchData`方法中利用当前路径来发送相应的请求，获取最新数据，并在页面上进行渲染。
# 4.2 监听用户行为
在某些场景下，我们需要监听用户行为，例如统计页面访问量。在`history.listen`中，我们可以根据`action`参数来区分不同的路由变化动作，并执行相应的操作。
javascript
let pageViews = 0;
history.listen((location, action) => {
  if (action === 'PUSH') {