React v6中this.props.history.push无法使用，新手求助导航实现方法

在React Router v6中，this.props.history已被移除，无法再通过该方式实现页面跳转，以下是适配v6的解决方案：

1. 函数组件（官方推荐方案） #

使用useNavigate钩子实现导航：

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

function YourComponent() {
  const navigate = useNavigate();

  const goToAddEmployee = () => {
    navigate('/add-employee');
  };

  return (
    <button onClick={goToAddEmployee}>跳转到添加员工页面</button>
  );
}

2. 类组件适配方案 #

如果仍在使用类组件，可通过以下两种方式处理：

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

v6官方移除了withRouter，可以自己实现简易版来传递导航相关方法：

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

// 自定义withRouter高阶组件
function withRouter(Component) {
  function 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 Component {
  goToAddEmployee = () => {
    this.props.navigate('/add-employee');
  };

  render() {
    return <button onClick={this.goToAddEmployee}>跳转到添加员工页面</button>;
  }
}

export default withRouter(YourClassComponent);

方式二：从父组件传递导航方法 #

若父组件是函数组件，可直接将navigate方法通过props传给类组件：

// 父函数组件
import { useNavigate } from 'react-router-dom';
import YourClassComponent from './YourClassComponent';

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

// 类组件
class YourClassComponent extends Component {
  goToAddEmployee = () => {
    this.props.navigate('/add-employee');
  };

  render() {
    return <button onClick={this.goToAddEmployee}>跳转到添加员工页面</button>;
  }
}

React Router v6更推崇函数组件+钩子的写法，这也是官方未来的主推方向，建议优先考虑重构为函数组件来使用useNavigate。

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