React Router Dom v6类组件登录成功后跳转welcome页问题咨询

问题原因 #

你遇到的报错是因为React Hook只能在函数组件的顶层作用域调用，不能在类组件、普通函数、事件回调中使用。react-router-dom v6 移除了v4版本中类组件默认注入的history prop，也没有直接提供类组件可用的导航API。

方案1：保留类组件（无需整体重构） #

自定义一个高阶组件（HOC）封装useNavigate，将导航函数注入到类组件的props中即可：

第一步：定义自定义withRouter高阶组件 #

import { useNavigate } from 'react-router-dom';

// 自定义HOC，为类组件注入navigate方法
const withRouter = (WrappedComponent) => {
  return (props) => {
    const navigate = useNavigate();
    return <WrappedComponent {...props} navigate={navigate} />;
  };
};

第二步：修改LoginComponent #

导出组件时用上面定义的withRouter包裹，然后直接在loginClicked方法中调用this.props.navigate：

class LoginComponent extends Component {
  // 其余原有代码保持不变
  loginClicked() {
    if (this.state.username === 'testuser' && this.state.password === 'dummy') {
      // 直接调用props里注入的navigate方法跳转
      this.props.navigate('/welcome');
    } else {
      this.setState({ showSuccessMessage: false, hasLoginFailed: true });
    }
  }
}

// 用withRouter包裹后导出
export default withRouter(LoginComponent);

修改完成后即可正常实现登录跳转逻辑，无需改动其他现有代码。

方案2：重构为函数组件（官方推荐写法） #

如果后续长期维护项目，更推荐重构为函数组件，直接使用Hook写法更简洁：

import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const LoginComponent = () => {
  const [formData, setFormData] = useState({
    username: 'testuser',
    password: ''
  });
  const [hasLoginFailed, setHasLoginFailed] = useState(false);
  const navigate = useNavigate();

  const handleChange = (e) => {
    setFormData(prev => ({...prev, [e.target.name]: e.target.value}));
  };

  const loginClicked = () => {
    if (formData.username === 'testuser' && formData.password === 'dummy') {
      navigate('/welcome');
    } else {
      setHasLoginFailed(true);
    }
  };

  return (
    <div>
      {hasLoginFailed && <div>Invalid Credentials</div>}
      User Name: <input type="text" name="username" value={formData.username} onChange={handleChange} />
      Password: <input type="password" name="password" value={formData.password} onChange={handleChange} />
      <button onClick={loginClicked}>Login</button>
    </div>
  );
};

export default LoginComponent;

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