React类组件路由重定向 解决useHistory不可用与Redirect不生效问题

你现在这套写法跳不动的核心逻辑很简单：在异步提交回调里直接return <Redirect to='/' />是完全没用的。这个返回值会被axios、fetch这类异步请求的Promise直接捕获，根本不会进入React的虚拟DOM渲染流程，React压根感知不到你要渲染这个重定向组件，自然不会触发跳转。

方案1：基于状态驱动的Redirect渲染（最贴近你现有思路的适配方式） #

既然<Redirect>是需要走正常渲染流程才能生效的组件，那就把重定向逻辑收敛到组件的render流程里，靠组件状态触发：

• 在类组件的state中新增一个认证成功标记，比如isAuthSuccess，初始值为false
• 异步接口返回成功时，别再return<Redirect>，直接调用setState把isAuthSuccess更新为true
• 在组件的render方法里增加判断：如果isAuthSuccess为真，就正常返回<Redirect to='/' />，走标准渲染流程的重定向组件会正常触发跳转

示例代码：

import { Redirect } from 'react-router-dom'

class Auth extends React.Component {
  state = {
    isAuthSuccess: false,
    // 你的账号、密码、报错等表单状态
  }

  handleSubmit = async (e) => {
    e.preventDefault()
    // 调用登录/注册接口
    const res = await authApi(this.state.formValues)
    if (res.success) {
      // 这里只更新状态，不直接返回组件
      this.setState({ isAuthSuccess: true })
    }
  }

  render() {
    // 状态满足时走正常渲染流程返回重定向组件
    if (this.state.isAuthSuccess) {
      return <Redirect to='/' />
    }
    return (
      // 你的登录/注册表单UI
    )
  }
}

方案2：类组件专用的编程式导航（无需渲染组件的跳转方式） #

如果你不想靠状态触发重定向组件，类组件可以直接拿到路由对象调用跳转方法，对应函数组件里useHistory的能力：

• 如果你用的是React Router v5及更早版本，直接用withRouter高阶组件包裹Auth组件，包裹后组件的props会自动注入history对象，接口成功时直接调用this.props.history.push('/')就能完成跳转
  示例代码：

  import { withRouter } from 'react-router-dom'
  
  class Auth extends React.Component {
    handleSubmit = async (e) => {
      e.preventDefault()
      const res = await authApi(this.state.formValues)
      if (res.success) {
        // 直接调用方法跳转，不需要渲染组件
        this.props.history.push('/')
      }
    }
  }
  // 用withRouter包裹组件，注入路由相关的props
  export default withRouter(Auth)
  

• 如果你用的是React Router v6版本，因为v6移除了内置的withRouter方法，可以自己写一个适配useNavigate的高阶组件，把跳转方法注入props后直接调用即可
  示例代码：

  import { useNavigate } from 'react-router-dom'
  
  // 自定义适配hook的高阶组件
  function withNavigate(Component) {
    return function Wrapper(props) {
      const navigate = useNavigate()
      return <Component {...props} navigate={navigate} />
    }
  }
  
  class Auth extends React.Component {
    handleSubmit = async (e) => {
      e.preventDefault()
      const res = await authApi(this.state.formValues)
      if (res.success) {
        // 直接调用注入的navigate方法跳转
        this.props.navigate('/')
      }
    }
  }
  
  export default withNavigate(Auth)
  

• 不要在脱离组件render生命周期的场景（比如异步回调、定时器、自定义事件回调里）直接return JSX组件，这类返回值不会被React挂载，所有依赖组件渲染生效的逻辑（比如<Redirect>）都不会工作
• 确认Auth组件本身在<BrowserRouter>或<HashRouter>的包裹范围内，否则就算用了withRouter也拿不到路由上下文对象，会抛出上下文缺失的报错
• 跳转前记得完成认证态的持久化（比如存localStorage、同步到全局状态管理），不然跳转后的路由守卫会因为检测不到登录态把你重新打回登录页，造成跳转无效的错觉

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