umijs history.block用法
UMI.js 是一个基于 React 的可插拔企业级前端应用框架，它提供了许多方便开发者使用的功能和工具。其中一个重要的功能是 `history.block`，它能够拦截路由的切换，允许我们进行一些额外的操作。在本文中，我将详细介绍 `history.block` 的用法并提供一步一步的说明。
首先，我们需要了解 `history` 对象是什么。`history` 是 UMI.js 中的一个全局变量，它是由 `createHistory` 函数创建的，并且用于记录当前应用的路由状态。`history` 对象提供了一系列方法来管理路由历史记录，比如 `history.push`、`place` 和 `Back`。
接下来，我们将介绍 `history.block` 的功能。`history.block` 可以拦截路由的切换，并在切换前执行一些操作，比如弹出确认提示框、保存表单数据、检查用户权限等。这对于处理导航跳转时的确认弹窗或者防止用户离开页面时丢失数据等场景非常有用。
要使用 `history.block`，我们需要在 UMI.js 的配置文件中进行相应的配置。打开 `config/config.js` 文件，并在 `routing` 配置项中添加如下代码：
javascript
export default {
  ...
  routes: [
    ...
  ],
  ...
  history: {
    type: 'browser',  或者 'hash'
    block: (location, action) => {
      执行操作，比如弹出确认提示框
      ...
    }
  },
  ...
}
在上面的例子中，我们定义了一个名为 `block` 的函数，它接收两个参数 `location` 和 `action`。`location` 表示即将跳转的路由信息，包括路径、查询参数和 hash 等。`action` 表示将要执行的路由动作，比如 `PUSH`、`POP` 或 `REPLACE`。
现在，我们可以在 `block` 函数中执行一些操作了，比如弹出确认提示框。为了更好地理解 `history.block` 的用法，我们将开始一个小示例。
首先，我们创建一个基本的路由组件，并在其中引入 `history` 对象。在该组件的 `componentDidMount` 方法中，通过调用 `history.block` 设置一个。在函数中，我们将弹出一个确认框，询问用户是否确定要切换路由。
javascript
import React from 'react';
import { history } from 'umi';
class Page extends React.Component {
  componentDidMount() {
    const unblock = history.block((location) => {
      if (!firm('确定离开该页面吗？')) {
        return false;
      }
    });
  }
  componentWillUnmount() {
    unblock();  在组件卸载时取消
  }
  render() {
    return (
      <div>
        {/* 路由内容 */}
      </div>react router拦截
    );
  }
}
export default Page;
在上述示例中，我们使用 `history.block` 创建了一个，并将其赋值给了一个变量 `unblock`。我们从 `history.block` 返回的是一个取消的函数，我们在组件的 `componentWillUnmount` 方法中调用它，以防止内存泄漏。
在函数中，我们弹出了一个确认框，询问用户是否确定离开该页面。如果用户点击了取消按钮，我们可以返回 `false` 来阻止路由的切换。