React页面中如何为按钮同时添加onClick事件与路由跳转功能

方案1：创建合并事件处理函数（React Router v6+） #

先确保组件已导入React Router的useNavigate钩子，在组件内获取导航方法后，修改按钮的onClick事件，同时执行过滤更新和路由跳转：

// 导入useNavigate
import { useNavigate } from 'react-router-dom';

// 组件内初始化导航方法
const navigate = useNavigate();

// 渲染部分代码修改
{ categoryData.map((item,index)=>{
    return(
        <button 
            className="dropdown-item" 
            onClick={(e) => {
                // 先执行原有的过滤值更新函数
                updateFilterValue(e);
                // 再执行路由跳转
                navigate(`/articles/${item}`);
            }} 
            key={index}  
            name="category" 
            value={item}
        >
            { item }
        </button>
    )
})}

方案2：在updateFilterValue中集成跳转逻辑 #

如果希望直接在过滤更新函数内完成跳转，可以将导航方法传入该函数（若函数定义在Context中，可在Context内直接导入useNavigate）：

// 修改后的updateFilterValue（若从Context获取，需同步修改Context内的函数定义）
const updateFilterValue = (event, navigateAction) => {
    let name = event.target.name;
    let value = event.target.value;

    dispatch({ type: "UPDATE_FILTERS_VALUE", payload: { name, value } });
    // 执行传入的路由跳转动作
    navigateAction();
};

// 渲染时的按钮代码
{ categoryData.map((item,index)=>{
    return(
        <button 
            className="dropdown-item" 
            onClick={(e) => updateFilterValue(e, () => navigate(`/articles/${item}`))} 
            key={index}  
            name="category" 
            value={item}
        >
            { item }
        </button>
    )
})}

注意事项 #

• 原按钮上的to属性无效，因为<button>不是React Router的<Link>/<NavLink>组件，直接移除即可。
• 若使用React Router v5，将useNavigate替换为useHistory，用history.push(/articles/${item})完成跳转。

内容的提问来源于stack exchange，提问作者Shabnam Sabah