React类组件路由导航实现咨询：如何替代函数组件的useNavigate()

React Router v6 移除了内置的withRouter高阶组件，且类组件无法直接使用useNavigate这类Hook，这就是你调用props.navigation.navigate()无效的核心原因。下面提供两种可行的实现方案：

方案1：自定义withRouter高阶组件注入导航能力 #

自己实现一个HOC，将navigate、location等路由相关能力注入类组件：

// withRouter.js
import { useNavigate, useLocation, useParams } from 'react-router-dom';

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

在你的类组件中使用：

import React from 'react';
import { withRouter } from './withRouter';

class YourClassComponent extends React.Component {
  handleNavigate = () => {
    // 调用注入的navigate方法跳转
    this.props.navigate('/your-target-route');
  };

  render() {
    return (
      <div>
        <button onClick={this.handleNavigate}>跳转到目标页面</button>
      </div>
    );
  }
}

// 必须用withRouter包装类组件才能拿到路由相关props
export default withRouter(YourClassComponent);

方案2：从父函数组件传递navigate作为props #

如果你的类组件是某个函数组件的子组件，可以直接在父组件中获取navigate并传递给类组件：

父函数组件：

import { useNavigate } from 'react-router-dom';
import YourClassComponent from './YourClassComponent';

function ParentFunctionalComponent() {
  const navigate = useNavigate();
  return <YourClassComponent navigate={navigate} />;
}

类组件直接使用传入的navigate：

import React from 'react';

class YourClassComponent extends React.Component {
  goToTarget = () => {
    this.props.navigate('/another-target');
  };

  render() {
    return <button onClick={this.goToTarget}>跳转</button>;
  }
}

export default YourClassComponent;

如果你使用的是React Router v5及以下 #

v5及更低版本内置了withRouter，直接导入使用即可：

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

class YourClassComponent extends React.Component {
  handleJump = () => {
    this.props.history.push('/target-page');
  };

  render() {
    return <button onClick={this.handleJump}>跳转</button>;
  }
}

export default withRouter(YourClassComponent);

内容的提问来源于stack exchange，提问作者mohd. ghouse