umi 3 实现路由拦截

关于umi3 如何实现路由拦截
umi 版本

"umi": "^3.2.20",

umi 内置了history 基于 React router 封装的路由历史管理工具，核心用于控制路由的跳转，监听路由的变化
核型作用

• 管理路由状态，记录页面访问轨迹。
• 提供编程式路由操作 API，无需手动编写链接或表单提交。
• 适配 umi 不同路由模式（hash、browser、memory）的统一调用方式

主要使用方式

• 通过 useHistory 钩子（函数组件） 函数组件中使用 hooks 获取 history 实例避免全局导入的耦合
• 类组件通过withRouter 高阶组件 为类组件注入 history、location、match 等路由相关属性。

核心 API
push (path, state)：跳转到指定路径，新增历史记录。
replace (path, state)：替换当前历史记录，跳转后无法回退到上一页。
go (n)：前进或后退 n 步（n 为正数前进，负数后退）。
goBack ()：等价于 go (-1)，回退上一页。
goForward ()：等价于 go (1)，前进下一页。
listen (callback)：监听路由变化，回调参数包含 location 和 action 信息。
umi3 的 history 和原生的区别

window.history.pushState() 有三个参数，每个参数的属性和特性如下：

1. 第一个参数：stateObject（状态对象）
   类型：普通对象（或 null），会被序列化存储。
   核心属性：
   与新添加的历史记录绑定，可通过 history.state 直接访问当前历史记录的状态对象。
   当触发 popstate 事件时（如用户点击前进 / 后退按钮），事件对象的 state 属性会指向该对象。
   限制：
   大小限制：不同浏览器对状态对象的存储大小有限制（通常约 640KB），超出会抛出错误。
   序列化要求：内部会通过结构化克隆算法（Structured Cloning Algorithm）序列化，因此不能包含函数、循环引用、Symbol 等无法序列化的数据，否则会报错。
   用途：通常存储与当前 URL 相关的状态数据（如路由参数、页面状态），用于页面回退 / 前进时恢复页面内容。
2. 第二个参数：title（标题）
   类型：字符串（或 null）。
   核心属性：
   理论上表示新历史记录对应的页面标题，但目前所有主流浏览器（Chrome、Firefox、Safari 等）均忽略此参数，不会更新页面标题。
   用途：由于浏览器不处理，实际使用中通常传空字符串 “” 或 null，未来若浏览器支持，可能用于设置标题。
3. 第三个参数：url（URL 地址）
   类型：字符串（可选，不传则默认使用当前 URL）。
   核心属性：
   会显示在浏览器地址栏，修改当前页面的 URL，但不会触发页面刷新或向服务器发送请求。
   必须与当前页面同源（协议、域名、端口完全一致），否则会抛出 SecurityError 异常。
   可以是相对路径（如 “./page2”、“/user”）或绝对路径（如 “https://example.com/page2”）。
   若 URL 包含哈希（如 “/page#section1”），仅会更新哈希部分，不影响历史记录的其他部分。
   用途：用于修改 URL 以匹配当前页面的逻辑状态（如单页应用的路由路径），让用户感知到 URL 变化，同时支持通过 URL 直接访问对应页面。
   总结
   三个参数的核心作用：
   stateObject：存储状态数据，用于页面回退 / 前进时恢复状态。
   title：预留参数，目前无实际作用。
   url：修改浏览器地址栏 URL，实现无刷新的 URL 更新。
   例如：
   javascript
   运行
   history.pushState(
   { id: 1, type: ‘article’ }, // 状态对象（存储页面相关数据）
   ‘’, // 标题（忽略）
   ‘/articles/1’ // 新URL（显示在地址栏）
   );
   在 React Router 中，history.listen((location, action) => { … }) 回调函数的两个参数 location 和 action 具有明确的类型定义，以下是具体说明（基于 TypeScript 类型）：
4. location 参数
   类型为 Location（React Router 定义的接口），包含当前路由的位置信息，核心属性如下：
   typescript
   interface Location<State = any> {
   pathname: string; // URL 路径部分（如 “/user/123”）
   search: string; // URL 查询字符串（如 “?name=foo&age=20”）
   hash: string; // URL 哈希部分（如 “#section1”）
   state: State | undefined; // 路由状态（由 pushState/replaceState 传入的 state 对象）
   key: string; // 唯一标识当前位置的键（如 “l24mu”）
   }
   pathname：字符串，当前 URL 的路径部分，始终以 / 开头。
   search：字符串，查询参数部分，包含 ? 前缀（若没有查询参数则为空字符串）。
   hash：字符串，哈希部分，包含 # 前缀（若没有哈希则为空字符串）。
   state：任意类型，对应 history.pushState 传入的 stateObject，默认 undefined。
   key：字符串，React Router 自动生成的唯一键，用于区分不同的历史记录。
5. action 参数
   类型为 HistoryAction（字符串字面量类型），表示触发路由变化的动作，可能的值为：
   typescript
   type HistoryAction = “POP” | “PUSH” | “REPLACE”;
   “PUSH”：通过 history.push() 新增历史记录（如点击 或调用 push 方法）。
   “REPLACE”：通过 history.replace() 替换当前历史记录（如调用 replace 方法）。
   “POP”：通过浏览器前进 / 后退按钮或 history.go()/back()/forward() 触发的历史记录切换。
   示例（TypeScript）
   typescript
   import { History, Location } from “history”;

const history: History = …; // 从 React Router 中获取的 history 对象

history.listen((location: Location, action: “POP” | “PUSH” | “REPLACE”) => {
console.log(“路径:”, location.pathname);
console.log(“查询参数:”, location.search);
console.log(“动作:”, action); // “POP” | “PUSH” | “REPLACE”
});
总结
location 是包含路由路径、参数、状态等信息的对象，类型为 Location。
action 是表示路由变化类型的字符串，只能是 “POP”、“PUSH”、“REPLACE” 三者之一。