在 React Router 的 history 模式中，push 和 replace 方法有什么区别？

原创于 2025-05-28 09:13:11 发布 · 468 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言 #react.js #前端框架 #前端

React Router 中 `push` 和 `replace` 的区别

核心差异：对浏览器历史记录的操作方式不同

1. push（推入）

行为特征
向浏览器的历史记录栈添加新条目
类似「手机APP的多层返回」效果
用户感知
点击浏览器后退按钮可回到前一个地址
典型场景
```
// 用户从首页点击进入商品详情页
history.push('/product/123')
```
- 普通页面跳转（如菜单导航）
- 需要保留回退路径的交互流程

历史记录变化

原记录: [ '/home' ]
操作后: [ '/home', '/detail' ]  ← 新增条目

2. replace（替换）

行为特征
用新地址覆盖当前历史记录
类似「原地修改便签纸内容」的效果
用户感知
点击浏览器后退按钮会跳过被替换的地址
典型场景
```
// 登录成功后替换当前地址
history.replace('/dashboard')
```
- 身份验证跳转（登录/登出）
- 表单提交后的结果页
- 不希望用户返回临时页面的场景

历史记录变化

原记录: [ '/home', '/login' ]
操作后: [ '/home', '/dashboard' ]  ← 最后一个地址被替换

3. 直观对比

操作	历史记录示例（操作前 → 操作后）	用户点击后退按钮去向
`push`	[A, B] → [A, B, C]	回到B
`replace`	[A, B] → [A, C]	回到A

4. 开发注意事项

错误处理页面建议使用 replace，避免用户反复提交错误请求
支付流程中的中间页推荐使用 replace，防止用户意外退回造成重复支付
带查询参数的跳转（如筛选条件）通常使用 push，保留参数调整空间

// 实际代码示例
<button 
  onClick={() => history.push('/checkout')} // 正常跳转
>去结算</button>

<button
  onClick={() => history.replace('/thank-you')} // 替换当前页
>确认订单</button>