升级React Router后组件无法获取props，调用history.push报错

1. React Router v6 不再通过 props 向element属性渲染的组件注入history、location等路由对象，你的 Login 类组件依赖this.props.history，但当前无法获取该属性，导致报错。
2. 路由配置存在错误用法：v6 已彻底移除component属性，统一使用element渲染组件，你代码里的<Route path="/user" component={<BoardUser />} />不符合规范。
3. v6 中exact属性已被废弃，Routes会自动匹配最精确的路径，无需手动添加。

步骤1：修复路由配置错误 #

将所有component属性改为element，并移除所有exact：

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/home" element={<Home />} />
  <Route path="/login" element={<Login />} />
  <Route path="/register" element={<Register/>} />
  <Route path="/profile" element={<Profile />} />
  <Route path="/schedule/" element={<BoardSchedule />} />
  <Route path="/user" element={<BoardUser />} />
  <Route path="/mod" element={<BoardModerator />} />
  <Route path="/admin" element={<BoardAdmin />} />
</Routes>

步骤2：解决Login组件的路由跳转问题 #

提供两种可行方案，推荐优先使用方案A：

方案A：将Login转为函数组件（React Router v6推荐方式） #

直接用useNavigate钩子替代history.push：

import { useNavigate, useRef, useState } from 'react-router-dom';
// 导入AuthService等其他依赖

const Login = () => {
  const navigate = useNavigate();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [message, setMessage] = useState('');
  const [loading, setLoading] = useState(false);
  const form = useRef();
  const checkBtn = useRef();

  const handleLogin = (e) => {
    e.preventDefault();

    setMessage('');
    setLoading(true);

    form.current.validateAll();

    if (checkBtn.current.context._errors.length === 0) {
      AuthService.login(username, password).then(
        () => {
          navigate('/user'); // 用useNavigate返回的方法实现跳转
          window.location.reload();
        },
        error => {
          const resMessage =
            (error.response && error.response.data && error.response.data.message) ||
            error.message ||
            error.toString();

          setLoading(false);
          setMessage(resMessage);
        }
      );
    } else {
      setLoading(false);
    }
  };

  // 原类组件的render逻辑移至此处
  return (
    // 你的表单JSX代码
  );
};

export default Login;

方案B：封装高阶组件适配类组件 #

如果不想修改组件类型，可以自己实现withRouter高阶组件，给类组件注入路由方法：

1. 创建withRouter.js文件：

import { useLocation, useNavigate, useParams } from 'react-router-dom';

const withRouter = (Component) => {
  const WrapperComponent = (props) => {
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();
    return <Component {...props} location={location} navigate={navigate} params={params} />;
  };
  return WrapperComponent;
};

export default withRouter;

2. 修改Login组件的导出逻辑：

import withRouter from './withRouter';
// 其他导入保持不变

class Login extends Component {
  // 原有代码逻辑不变

  handleLogin(e) {
    // 其他代码不变
    AuthService.login(this.state.username, this.state.password).then(
      () => {
        this.props.navigate('/user'); // 使用注入的navigate方法跳转
        window.location.reload();
      },
      // 错误处理逻辑不变
    );
  }

  // render方法不变
}

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

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