ReactJS中带onClick的<a>元素href点击无效问题

你的<a>标签href跳转失效，核心原因是toggleChange函数里的e.preventDefault()——这个方法会直接阻止<a>标签的默认跳转行为，导致点击时只执行类名修改逻辑，不会触发页面跳转。

解决方案 #

方案1：不需要阻止跳转，直接删除阻止代码 #

如果修改类名后不需要额外操作，直接删掉e.preventDefault()即可，让<a>标签的默认跳转行为正常执行：

function toggleChange(e) {
    const el = document.getElementById("dashboard-button");
    el.className="nav-link";
}

方案2：先执行类名修改，再手动触发跳转 #

如果需要先完成类名修改再跳转，保留e.preventDefault()阻止默认行为，然后手动调用跳转逻辑：

function toggleChange(e) {
    e.preventDefault();
    const el = document.getElementById("dashboard-button");
    el.className="nav-link";
    // 手动跳转到目标地址
    window.location.href = './dashboardpage';
}

更符合React规范的写法（推荐） #

React不推荐直接操作DOM，建议用状态管理类名，避免使用document.getElementById：

import { useState } from 'react';

function Sidebar() {
    // 用状态控制是否显示collapsed类
    const [hasCollapsedClass, setHasCollapsedClass] = useState(true);

    function toggleChange(e) {
        setHasCollapsedClass(false);
        // 如果需要保留默认跳转，删掉下面这行；如果要手动跳转就保留并添加window.location.href
        // e.preventDefault();
        // window.location.href = './dashboardpage';
    }

    return(
        <div>
            <li className="nav-item active">
                <a 
                    className={`nav-link ${hasCollapsedClass ? 'collapsed' : ''}`} 
                    id="dashboard-button" 
                    href='./dashboardpage' 
                    onClick={toggleChange}
                >
                    <i className="fa-solid fa-table-columns"></i>
                    <span>Dashboard</span>
                </a>
            </li>
        </div>
    )
}

内容的提问来源于stack exchange，提问作者John Ezkiel