如果您仍然想使用react-router-dom v6（请参阅答案末尾的建议），可以使用useNavigate钩子来实现这一点

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

然后在你的功能组件中代替this.props.history.push('/add-employee');

//inside the function at the top
const navigate = useNavigate();

// use this in replace of 'this.props.history.push('/add-employee');'
navigate('/add-employee');

一些与您正在学习的教程相关的建议

• 安装教程中使用的相同依赖项
• 或遵循另一个教程，是更及时

使用函数组件更容易，可以调用useNavigate钩子。
然后，导航到新路线可以这样完成：

import { useNavigate } from 'react-router-dom';
function MyComponent() {
    const navigate = useNavigate();
    function addEmployee() {
        navigate('/add-employee');
    }
    // return some JSX...
}

要使其与类组件一起工作，您需要创建一个函数组件 Package 器。

const withNavigate = Comp => props => <Comp {...props} navigate={useNavigate()} />;
class MyClassComponent extends React.Component {
    addEmployee = () => this.props.navigate('/add-employee');
    // ...
}
const MyComponent = withNavigate(MyClassComponent);
// now only use MyComponent instead of the class component
export default MyComponent;

useNavigate钩子可以解决您的问题。

验证码：

import { useNavigate } from 'react-router-dom';
const  MyComponent =()=> {

    const navigate = useNavigate();
    const addEmp=()=> (
        navigate('/add-employee');
    )
    // return jsx
}