React实现登录功能时，Redirect和history.replace该如何选择？

两种写法的执行流程差异 #

Comp1（<Redirect> 写法）执行流程 #

1. 组件开始渲染，按顺序执行语句A、B、C
2. 进入返回阶段，返回 <Redirect> 组件
3. react-router 内部识别到该组件，自动调用 history.replace 执行登录页跳转
4. 跳转逻辑触发后，当前组件剩余未渲染的内容会直接终止，不会产生无效的DOM渲染操作

Comp2（直接调用 history.replace 写法）执行流程 #

1. 组件开始渲染，首先执行 history.replace 触发跳转
2. 但此时组件的渲染流程不会被中断，会继续执行语句A、B、C
3. 执行return逻辑，生成 <div>页面内容</div> 对应的真实DOM节点
4. 等到浏览器下一次批量更新时，才会执行跳转卸载当前组件的无效DOM，整个过程多了一次完全无意义的渲染和DOM创建/销毁开销

为什么更推荐 <Redirect> 写法 #

• 性能层面：没有冗余渲染开销，当组件嵌套深、逻辑复杂时，性能优势会更明显，不会产生额外的GC压力
• 规范层面：React组件的渲染逻辑应该是纯函数，直接在渲染主体调用跳转属于在渲染流程中插入副作用，不符合React设计范式，极端情况下如果组件多次重渲染还会重复触发跳转，引发不可预期的bug
• 功能适配：登录跳转场景下 <Redirect> 支持传入state参数携带原页面路径，登录完成后可以直接取参数回跳，适配通用路由鉴权的封装逻辑
• 兼容性：声明式跳转默认走react-router的统一路由拦截流程，如果你后续要加全局路由守卫、跳转埋点之类的逻辑，不需要额外适配

如果确实需要用命令式跳转，不要直接写在组件渲染主体，要放到副作用钩子中避免打断渲染流程：

const Comp3 = () => {
  useEffect(() => {
    // 满足登录态校验失败条件时才触发跳转
    if (!userInfo.isLogin) {
      history.replace('/login')
    }
  }, [userInfo.isLogin])

  // 语句A、语句B、语句C
  return <div>页面内容</div>
}

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