React 18搭配React Router 6中类组件的路由跳转问题

React Router 6 移除了对类组件直接注入 history、location 等路由相关 props 的支持，同时删除了 withRouter 高阶组件，导致原有的 this.props.history.push 写法失效。以下是两种可行的解决方式：

方案一：自定义 withRouter 高阶组件 #

通过函数组件结合路由 Hooks，封装一个高阶组件给类组件传递路由能力：

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

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

// 你的类组件
class YourClassComponent extends React.Component {
  handleJump = () => {
    // 替代原有的 history.push
    this.props.navigate('/admin/user/create');
  };

  render() {
    return <button onClick={this.handleJump}>跳转到用户创建页</button>;
  }
}

// 用自定义高阶组件包装类组件后导出
export default withRouter(YourClassComponent);

方案二：函数组件作为中间层传递路由方法 #

用函数组件作为包装层，通过 props 将 navigate 传递给类组件：

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

// 函数包装组件
const ClassComponentWrapper = (props) => {
  const navigate = useNavigate();
  return <YourClassComponent {...props} navigate={navigate} />;
};

// 你的类组件
class YourClassComponent extends React.Component {
  handleJump = () => {
    this.props.navigate('/admin/user/create');
  };

  render() {
    return <button onClick={this.handleJump}>跳转到用户创建页</button>;
  }
}

export default ClassComponentWrapper;

补充说明 #

• navigate 函数的用法和原 history.push 基本一致，也支持传递状态：

  this.props.navigate('/admin/user/create', { state: { userId: 123 } });
  

• 路由状态可通过 this.props.location.state 获取。

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