如何在 React 中的两个按钮之间切换并根据单击的按钮更改 NAvlink 路径

Posted 2023-02-18

【中文标题】如何在 React 中的两个按钮之间切换并根据单击的按钮更改 NAvlink 路径

【英文标题】：How to toggle between two buttons in React and chnange the NAvlink path based on button clicked

【发布时间】：2021-12-26 11:15:09

【问题描述】：

我正在尝试在反应中的两个图像之间切换并尝试根据路径更改 Navlink 路由在此处输入图像描述

<button className="lessonTypeButton">
  <img
    src=singleLessonsType
    
    className="packageOne"
    onClick=lessonSelected
  />
</button>

<br />
<br />
<br />

<button className="lessonTypeButton">
  <img
    src=packageLessons
    
    className="packageTwo"
    onClick=lessonSelected
  />
</button>

【参考方案1】：

您可以拥有href 属性以在 URL 中拥有路由，

<button className="lessonTypeButton">
    <img
      src=packageLessons
      
      className="packageTwo"
      onClick=lessonSelected
      href=/packageLessons
    />
</button>
<button className="lessonTypeButton">
    <img
      src=singleLessonsType
      
      className="packageOne"
      onClick=lessonSelected
      href=/singleLessonsType
    />
</button>

或者使用钩子，

import  useHistory  from "react-router-dom";

然后在函数中使用，

let history = useHistory();

function lessonSelected = ()=>
    history.push("/singleLessonsType");

或者直接调用onclick事件，

<button className="lessonTypeButton">
    <img
      src=packageLessons
      
      className="packageTwo"
      onClick=history.push("/packageLessons");
    />
</button>
<button className="lessonTypeButton">
    <img
      src=singleLessonsType
      
      className="packageOne"
      onClick=history.push("/singleLessonsType");
    />
</button>