在react-router-dom v6中，对历史记录的支持已经过时，但取而代之的是引入了导航功能。如果您想在特定事件成功时将用户重定向到特定页面，请按照以下步骤操作：
创建一个名为withRouter.js的文件，并将下面给出的代码粘贴到此文件中：

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

export const withRouter = (Component) => {
  const Wrapper = (props) => {
    const navigate = useNavigate();
    
    return (
      <Component
        navigate={navigate}
        {...props}
        />
    );
  };
  
  return Wrapper;
};

现在，在任何一个基于类的组件中，您想要将用户重定向到特定路径/组件，请导入上面的withRouter.js文件，并使用this.props.navigate('/your_path_here')函数进行重定向。
为了帮助您，下面给出了一个显示相同内容的示例代码：

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

class Your_Component_Name_Here extends React.Component{
    constructor(){
        super()
        this.yourFunctionHere=this.yourFunctionHere.bind(this);
    }

    yourFunctionHere()
    {
        this.props.navigate('/your_path_here')
    }

    render()
    {
        return(
            <div>
              Your Component Code Here 
            </div>
        )
    }
}

export default withRouter(Your_Component_Name_Here);

以上代码工作完美。这只是一个小的扩展。如果你想要onclick函数这里是代码：

<div className = "row">
    <button className= "btn btn-primary" 
            onClick={this.yourFunctionHere}>RedirectTo</button>
</div>

在重定向用户基本类组件中，执行以下步骤：首先导入一些组件，如下所示

import { Navigate } from "react-router-dom"

现在为Return创建一个布尔值状态，如下所示：

state = {
    redirect:false
}

现在将Navigate组件插入到组件树的底部，但使用&&进行条件渲染，如下所示：

{ 
   this.state.redirect && <Navigate to='/some_route' replace={true}/>
}

现在，当你想要重定向用户到某个页面时，只需在你想要的一行代码上制作真正的重定向状态，现在你可以看到你导航到了某个页面：）

试试这个：

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

  export const withRouter = (Component) =>  {
    function ComponentWithRouterProp(props) {
      let location = useLocation();
      let navigate = useNavigate();
      let params = useParams();
      return (
        <Component
          {...props}
          router={{ location, navigate, params }}
        />
      );
    }
    return ComponentWithRouterProp;
  }

在我的例子中，使用了这个函数：

import { withRouter } from '../utils/with-router';
import './menu-item.styles.scss';

const MenuItem = ({title, imageUrl, size, linkUrl,router}) =>(
    <div
        className={`${size} menu-item`} onClick={() => router.navigate(`${router.location.pathname}${linkUrl}`)}
    >
        <div className='background-image' 
        style={{
            backgroundImage: `url(${imageUrl})`
        }}  />

        <div className="content">
            <h1 className="title">{title.toUpperCase()}</h1>
            <span className="subtitle">SHOP NOW</span>
        </div>
    </div>
)

export default withRouter(MenuItem);

我在https://www.reactfix.com/2022/02/fixed-how-can-i-use-withrouter-in-react.html找到了这个解决方案
另一种解决方案是使用导航，例如：

<button onClick={() => {navigate("/dashboard");}} >
        Dashboard
  </button>

在react类组件中使用****。来自react路由器文档：
元素在呈现时会改变当前位置，它是useNavigate的组件 Package 器，接受所有与props相同的参数。

尝试创建一个可重用的功能组件，比如一个简单的按钮，您可以在类组件中使用它。

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

const NavigateButton = ( { buttonTitle, route,isReplaced}) => {
    const navigate = useNavigate();
    return (
        <button 
            className = "btn btn-primary" 
            onClick = { () => { 
                navigate( route , {replace:isReplaced} )
            }}
        >
            {buttonTitle}
        </button>;
        );

    });
export default NavigateButton;

在这之后，你就可以在你的任何一个类组件中使用NavigateButton了。

<NavigateButton title = {"Route To"} route = {"/your_route/"} isReplaced = {false}/>

在GitHub react-router问题线程中找到了此解释，它解释了如何使用带有类组件https://github.com/remix-run/react-router/issues/8146的react-router 6
我从上面的问题说明中获得此代码

import React,{ Component} from "react";
import { useNavigate } from "react-router-dom";

export const  withNavigation = (Component : Component) => {
  return props => <Component {...props} navigate={useNavigate()} />;
} 

//classComponent  
class LoginPage extends React.Component{

submitHandler =(e) =>{
    //successful login 
    this.props.navigate('/dashboard');
  }
}
 export default withNavigation(LoginPage);

下面是我的解决方案：

import React, { Component } from "react";
import { useNavigate } from "react-router-dom";
class OrdersView extends Component {
    Test(props){
      const navigate = useNavigate();
      return(<div onClick={()=>{navigate('/')}}>test{props.test}</div>);
    }
  render() {
    return (<div className="">
              <this.Test test={'click me'}></this.Test>
            </div>);
  }
}