如何在类组件中使用react-router-dom v6导航

Question

我安装了react-router-dom v6，我想使用一个基于类的组件，在之前版本的react-router-dom v5this.props.history（）在做某事后适用于重定向页面，但此代码不适用于v6。

在react-router-dom v6中，函数组件有一个钩子useNavigate，但我需要在类基础组件中使用它，请帮助我如何在类组件中使用导航？

Answer 1

在 react 类组件中使用

一个

Answer 2

在类基组件中重定向用户按照此步骤操作：首先导入一些像这样的组件

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

现在为返回布尔值设置一个状态，如下所示：

state = {
    redirect:false
}

现在将Naviagate组件插入到组件树的底部，但是使用

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

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

Answer 3

在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>