React Router中Link组件onClick事件未触发，求原因分析

问题描述 #

在React Router的Link组件中设置了onClick事件，点击Logout链接后，控制台仅输出Logout组件中的log out日志，而onClick内的日志和AuthenticationService的登出方法日志均未输出，onClick事件看似未触发。

相关代码 #

Link组件代码

<Link
  className="nav-link"
  to="/logout" 
  onClick={() => {
    console.info('header logout onclick')
    AuthenticationService.logout()
  }}
>
  Logout
</Link>

AuthenticationService代码

class AuthenticationService {
    
    registerSuccessfulLogin(username, password) {
        console.info('resgister scessfull login')
        sessionStorage.setItem("username", username);
        sessionStorage.setItem("password", password);
    }
    
    logOut() {
        console.info('autenticated service  log out')
        sessionStorage.removeItem("username");
        sessionStorage.removeItem("password");
    }
    
    isUserLoggedIn() {
        console.info('is user login in')
        let user = sessionStorage.getItem("username")
        console.info('is user login in ' + user )
        if (user === null) return false
        return true
    }
}

export default new AuthenticationService()

Logout组件代码

import React from 'react'
import {Component} from 'react'

class Logout extends Component  {
  render () {
    console.info('log out')
    return <div>Logout</div>
  }
}

export default Logout

问题原因 #

核心问题是方法名拼写不一致：

• AuthenticationService类中定义的登出方法是logOut()（首字母大写O）
• 但Link组件的onClick回调里调用的是logout()（首字母小写o），这会调用一个不存在的方法。由于JavaScript中调用不存在的方法会抛出错误，若未开启严格模式或错误捕获，控制台可能不显示错误，导致看起来像是onClick事件未触发。

另外，React Router的Link组件默认会在点击时立即触发导航，若onClick内的代码执行出错，会直接跳过后续逻辑，只完成导航动作。

解决方案 #

1. 修正方法名拼写 #

将Link组件中调用的方法名改为与类中定义一致的logOut()：

<Link
  className="nav-link"
  to="/logout" 
  onClick={() => {
    console.info('header logout onclick')
    AuthenticationService.logOut() // 修正方法名拼写
  }}
>
  Logout
</Link>

2. 可选：手动控制导航流程（避免导航抢占执行） #

如果希望确保登出逻辑完全执行后再跳转到Logout页面，可以手动阻止Link的默认导航行为，完成登出后再手动触发导航：

// React Router v6+ 示例，使用useNavigate钩子
import { useNavigate } from 'react-router-dom';

function YourHeaderComponent() {
  const navigate = useNavigate();

  return (
    <Link
      className="nav-link"
      onClick={(e) => {
        e.preventDefault(); // 阻止Link默认导航
        console.info('header logout onclick');
        AuthenticationService.logOut();
        navigate('/logout'); // 手动跳转
      }}
    >
      Logout
    </Link>
  );
}

内容的提问来源于stack exchange，提问作者stein korsveien