如何通过单击类组件中的按钮来进行路由？

Posted 2023-03-05

【中文标题】如何通过单击类组件中的按钮来进行路由？

【英文标题】：How to do routing in react by clicking a button in class component?

【发布时间】：2021-12-12 11:06:31

【问题描述】：

我在反应类组件中有一个按钮，如下所示

 <Link to="display">
    <button onClick=this.nextBtn className="nextBtn">
        Submit
    </button>
 </Link>

通过单击按钮，我需要使用函数nextBtn = () => 将其路由到另一个名为<Display /> 的组件。

我看到在函数组件中可以通过useHistory，但是在类组件中，我不知道该怎么做。

【问题讨论】：

您可以在 this.nextBtn 函数的主体上执行此操作，因此删除 Link 包装器并导入 Router 和 Router.push('/newRoute')

为什么Link 组件不能完成它的工作并链接到渲染Display 组件的路径？下面的所有答案都没有问这个基本问题，并假设您的 sn-p 中的代码可以访问最近路由器的 route props。能否提供更全面完整的代码示例？

【参考方案1】：

您也可以使用import withRouter from "react-router"; 中的withRouter 并注入您的组件。您可以获取history 作为道具并使用history.push() 导航路线。

示例：

import React from "react";
import  withRouter  from "react-router";

class ShowTheLocation extends React.Component 
  nextBtn = () => 
    const  history  = this.props;

    history.push("/display");
  ;

  render() 
    return (
      <Link to="display">
        <button onClick=this.nextBtn className="nextBtn">
          Submit
        </button>
      </Link>
    );
  


export default withRouter(ShowTheLocation);

【讨论】：

它显示在“react-router”中找不到“withRouter”（导入为“withRouter”）。使用react-router-dom v6.2.1

【参考方案2】：

你也可以试试这个。这对我有用

import  browserHistory  from 'react-router';
    class MyClass extends Component 
        nextBtn = () => 
           browserHistory.push('/display');
        
    

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案3】：

我假设您正在使用诸如 react-router 之类的路由库。

你想从 react-router 访问历史对象。 React 路由器提供了所谓的高阶函数，它们可以访问历史并将其注入到您的类组件中。然后在您的组件内部，您可以通过 this.props.history 访问它。

import  withRouter  from 'react-router-dom';

//JS-Example
class YourJSComponent extends Component 

 /**
 * Since the class gets exported wrapped in withrouter(YourComponent), history is now in the props.
 */

anyRedirectMethod = () => 
 this.props.history.push("/yourRoute")

 

 render(

   return(
    <Link to="display">
     <button onClick=this.anyRedirectMethod className="nextBtn">
      Submit
     </button>
    </Link>
   )

 )


export default withRouter(YourJSComponent);

【参考方案4】：

您可以使用多种方法路由到另一个页面。 首先，在您的情况下，您使用的是链接。但是您通过的路线名称是错误的。您必须像这样在前面传递路线名称：

        <Link to='/display'> 
        // display should be a routes name
         <button className="nextBtn">
         Submit
         </button>
         </Link>

https://reactrouter.com/web/api/Link.

您可以在此处阅读更多信息：

第二种方法： 使用 react-router-dom 包定义路由，然后在按钮的 onClick 事件上使用下面提到的方法之一。

  1. this.props.history.push("componentpath").
  2. browserHistory object (in react-router package).

同时检查这个问题的解决方案...how to navigate from one page to another in react js?