React.js中类组件点击按钮时如何重定向到其他类组件

首先明确两个问题的根因：

• useHistory 是React Router提供的Hook，只能在函数组件或自定义Hook中调用，类组件中无法直接使用
• Link嵌套Button跳转失效，大概率是Button的点击事件阻断了Link的默认跳转行为，同时你需要在点击后执行onSubmit提交逻辑，更适合用编程式跳转实现，不需要嵌套Link

方案1：React Router v5 版本使用 withRouter 高阶组件 #

withRouter可以将路由相关的history、location、match属性注入到类组件的props中，直接调用即可：

import { withRouter } from 'react-router-dom'
import Button from '你的按钮组件路径'

class YourClassComponent extends React.Component {
  onSubmit = () => {
    // 执行你的提交逻辑
    console.log('提交完成')
    // 调用history.push实现跳转
    this.props.history.push('/login')
  }

  render() {
    return (
      <Button onClick={this.onSubmit}>Submit</Button>
    )
  }
}

// 导出时用withRouter包裹组件
export default withRouter(YourClassComponent)

方案2：React Router v6 版本适配 #

v6版本移除了官方的withRouter，你可以自行封装一个高阶组件注入路由能力：

import { useNavigate, useLocation, useParams } from 'react-router-dom'
import Button from '你的按钮组件路径'

// 自定义withRouter高阶组件
function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    const navigate = useNavigate()
    const location = useLocation()
    const params = useParams()
    return <Component {...props} router={{ navigate, location, params }} />
  }
  return ComponentWithRouterProp
}

class YourClassComponent extends React.Component {
  onSubmit = () => {
    // 执行你的提交逻辑
    console.log('提交完成')
    // 调用navigate实现跳转
    this.props.router.navigate('/login')
  }

  render() {
    return (
      <Button onClick={this.onSubmit}>Submit</Button>
    )
  }
}

export default withRouter(YourClassComponent)

方案3：声明式跳转实现 #

如果偏好声明式写法，也可以通过state控制重定向组件的渲染：

import { Navigate } from 'react-router-dom'
import Button from '你的按钮组件路径'

class YourClassComponent extends React.Component {
  state = {
    shouldGoToLogin: false
  }

  onSubmit = () => {
    // 执行你的提交逻辑
    console.log('提交完成')
    this.setState({ shouldGoToLogin: true })
  }

  render() {
    // 状态符合条件时渲染重定向组件
    if (this.state.shouldGoToLogin) {
      return <Navigate to="/login" replace />
    }
    return (
      <Button onClick={this.onSubmit}>Submit</Button>
    )
  }
}

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