React Navigation V6：navigation.replace与navigation.navigate的区别解析

1. 路由栈行为差异 #

navigation.navigate #

• 智能匹配现有路由：如果目标屏幕已在路由栈中存在，会直接跳转到该屏幕的已有实例，同时移除该屏幕上方的所有路由；如果目标屏幕不存在，则将其添加到栈顶。
• 栈长度变化：跳转新页面时栈长度+1；回到已有页面时栈长度减少（移除上方冗余路由）。

navigation.replace #

• 直接替换栈顶路由：无论目标屏幕是否在栈中存在，都会用新的目标路由替换当前栈顶的路由，路由栈总长度保持不变。
• 栈长度变化：始终维持原栈长度（仅替换栈顶项，不增不减）。

2. 返回逻辑差异 #

• 使用 navigate 跳转后：
  • 若跳转到新页面，点击返回会回到跳转前的页面（栈顶的前一项）；
  • 若回到已有页面，点击返回会回到该已有页面之前的路由（比如栈 [A, B, C] 调用 navigate(B) 后，返回会回到 A）。
• 使用 replace 替换后：
  点击返回会回到被替换路由的前一项，因为原栈顶路由已被移除（比如栈 [A, B, C] 调用 replace(D) 后，返回会回到 B，而非 C）。

3. 适用场景示例 #

适合用 navigation.navigate 的场景 #

• 常规页面跳转：比如从商品列表页跳转到详情页，或从详情页回到列表页（复用已存在的列表页实例）；
• 需要保留返回路径的场景：比如从个人中心跳转到设置页，点击返回能回到个人中心。

适合用 navigation.replace 的场景 #

• 登录/注册流程：登录成功后用 replace 跳转到首页，避免用户点击返回回到登录页；
• 临时页面跳转：比如引导页、广告页跳转到主页面，替换掉临时页面，防止返回时再次进入；
• 刷新当前页：在某个页面操作后需要刷新内容，但不想添加新的路由实例，可用 replace 替换当前页。

代码示例对比 #

navigation.navigate 示例 #

// 当前路由栈: [Home, Profile]
navigation.navigate('Settings');
// 路由栈变为: [Home, Profile, Settings]

// 当前路由栈: [Home, Profile, Settings]
navigation.navigate('Profile');
// 路由栈变为: [Home, Profile]（Settings被弹出栈）

navigation.replace 示例 #

// 当前路由栈: [Login]
navigation.replace('Home');
// 路由栈变为: [Home]（Login被替换，点击返回会退出App）

// 当前路由栈: [Home, Profile, Settings]
navigation.replace('Profile');
// 路由栈变为: [Home, Profile, Profile]（替换栈顶的Settings为新的Profile实例）

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