如何在React页面的按钮中同时添加onclick和href？

Question

我在 React 页面中有一个按钮元素。通过 onclick 事件，我从上下文中调用了一个函数。现在我想在该按钮中添加一个 href。

这是我的代码

{ categoryData.map((item,index)=>{
            return(
                  
                <button className="dropdown-item"  to={/articles/${item}} onClick={updateFilterValue} key={index}  name="category" value={item}>{ item }</button>
                )
})}

基本上 onclick 会将 name 和 value 属性传递给 updateFilterValue 函数。我从我的上下文中获取这个 updateFilterValue 。现在我想重定向到 /articles/${item} 路线。如何做到这一点..请帮助我..这会很棒。

Answer 1

如果你想通过点击该项目进入路线，你可以使用react-router dom的Navigate元素，你可以简单地将它放在你的函数中。

您可以参考此处导航docs

import { Navigate } from "react-router-dom";
{ categoryData.map((item,index)=>{
     return(
           <button className="dropdown-item"
    onClick={()=>
    {
      updateFilterValue(name,value)
      <Navigate to=`/articles/${item}` replace={true} />
    } 
    key={index}  name="category" value={item}>{ item }</button>
    )
})
}

Answer 2

在

updateFilterValue

函数内，您可以设置

window.location.href = "/articles/${item}"

，以便在函数代码之后您可以重定向到该路由。

希望有帮助。