⚡ 30 秒速记

• 地址状态变化 → 路由匹配 → 界面更新
• 普通站内链接可拦截默认整页导航
• pushState 不会自动触发 popstate
• 直接访问历史路径需要服务器正确响应
• 路由数据、错误和滚动恢复也是导航的一部分

客户端路由把地址当成应用状态，地址变化后选择该显示哪组组件。 点击合适的站内链接时，路由器更新历史记录并通知界面，浏览器后退则通过历史事件同步。主动调用 pushState 不会自己触发 popstate，所以路由器还要维护通知机制。历史路径直接刷新会请求服务器，部署时必须提供对应文档或回退规则，不能只在应用内点击测试。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

一、React Router基础之history

1.1 History介绍

history是一个独立的第三方js库，可以用来兼容在不同浏览器、不同环境下对历史记录的管理，拥有统一的API。具体来说里面的history分为三类

• 老浏览器的history: 主要通过hash来实现，对应createHashHistory
• 高版本浏览器: 通过html5里面的history，对应createBrowserHistory
• node环境下: 主要存储在memeory里面，对应createMemoryHistory

上面针对不同的环境提供了三个API，但是三个API有一些共性的操作，将其抽象了一个公共的文件createHistory

// 内部的抽象实现
function createHistory(options={}) {
  ...
  return {
    listenBefore, // 内部的hook机制，可以在location发生变化前执行某些行为，AOP的实现
    listen, // location发生改变时触发回调
    transitionTo, // 执行location的改变
    push, // 改变location
    replace,
    go,
    goBack,
    goForward,
    createKey, // 创建location的key，用于唯一标示该location，是随机生成的
    createPath,
    createHref,
    createLocation, // 创建location
  }
}

上述这些方式是history内部最基础的方法，createHashHistory、createBrowserHistory、createMemoryHistory只是覆盖其中的某些方法而已。其中需要注意的是，此时的location跟浏览器原生的location是不相同的，最大的区别就在于里面多了key字段，history内部通过key来进行location的操作