React组件用history.push跳转触发TS类型报错，用Redirect正常原因求解

• React函数组件的返回值有严格的类型约束，仅允许返回JSX 元素、null两种合法类型，不允许返回void类型。
• 你在未登录分支直接返回history.push('/login')，而history.push方法本身的返回值为void，这就导致组件的返回值联合类型变成了void | Element，不符合TS对React组件返回值的校验规则，直接触发类型报错。
• 从React运行逻辑来看，history.push属于命令式路由跳转的副作用操作，不应该直接放在组件的渲染返回分支中：组件渲染阶段执行副作用本身就不符合React的设计规范，测试时render方法执行组件渲染逻辑时拿到void类型的返回值，自然无法通过校验。
• 改用<Redirect to='/login'/>后报错消失的原因也很明确：<Redirect>是React Router官方提供的合法JSX组件，未登录分支返回的是符合规范的JSX元素，此时组件返回值类型为Element | Element，完全符合TS类型要求，同时跳转逻辑被封装在<Redirect>内部的副作用钩子中执行，符合React生命周期规范，测试时render方法拿到合法JSX返回值可以正常运行。

如果需要继续使用history.push实现相同的逻辑，可以调整代码如下：

import { useHistory, useEffect } from 'react-router';
const SomeCompo = () => {
  const history = useHistory();
  // 将跳转逻辑放在副作用钩子中执行
  useEffect(() => {
    if(!user) {
      history.push('/login');
    }
  }, [user, history])
  // 未登录时返回null，符合组件返回值类型要求
  if(!user) return null;
  return(<div>...component </div>)
}
export default SomeCompo;

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