React Router History状态存储及history.push中state的相关技术疑问

Hey，我来帮你一步步理清这些React Router相关的疑问：

1. React Router的History对象将状态存储在哪里？ #

React Router的History对象本质是对浏览器原生历史功能的封装，状态存储位置分两种情况：

• 如果你用的是BrowserRouter（HTML5路由模式）：状态会存在浏览器原生的history会话历史栈里，也就是原生history.state属性中，这些数据只会保存在客户端，不会随请求发送到服务器。
• 如果你用的是HashRouter（哈希路由模式）：状态会被序列化后编码到URL的哈希部分（#后面的内容），同样不会被发送到服务器，所有处理都在客户端完成。

2. 关于this.props.history.push({ pathname: '/created', state: {created_id: this.state.id} });的细节 #

这个state是什么？ #

这里的state是你在路由跳转时传递给目标页面的隐式自定义数据——它不会出现在URL里，相当于给目标路由组件的“后台小纸条”。在目标组件里，类组件可以通过this.props.location.state拿到这个created_id，函数组件则可以用useLocation()钩子获取：

// 函数组件示例
import { useLocation } from 'react-router-dom';

function CreatedPage() {
  const location = useLocation();
  const createdId = location.state?.created_id;
  // ...
}

它是否能在所有浏览器中正常工作？ #

兼容性取决于你用的路由模式：

• BrowserRouter：依赖HTML5的History API，支持IE10及以上的现代浏览器，IE9及以下不兼容，但现在绝大多数项目已经不再适配这类老旧浏览器了。
• HashRouter：基于浏览器原生的哈希特性，几乎所有浏览器（包括IE8这类古董级浏览器）都能正常工作。

React将该state存储在何处？ #

其实不是React单独存储的，而是依托浏览器的能力：

• BrowserRouter模式下：直接存在浏览器原生history对象的会话历史条目里，React只是调用原生API来设置和读取这个状态。
• HashRouter模式下：会被序列化为字符串后拼在URL的哈希片段里，React在解析路由时会把这部分内容还原成state对象。

内容的提问来源于stack exchange，提问作者Mahesh