React中onClick绑定localStorage.clear()导致页面加载时JWT被清空

onClick属性接收的参数必须是函数引用，你当前代码里写的是localStorage.clear()，这是函数执行语句，不是函数引用。
React在渲染组件的阶段，会先计算所有JSX大括号内表达式的返回值，只要组件一渲染（也就是你登录成功登出按钮刚挂载的时候），就会立刻执行localStorage.clear()，完全不需要等用户点击，这就是JWT在登录后立刻被清空的原因。

把执行逻辑包裹在箭头函数中，只有用户触发点击事件时才会执行清空操作：

<Link to="/">
    <button 
      onClick={() => localStorage.clear()} 
      style={{backgroundColor: "black"}} 
      className="login-button"
    >
      Log Out
    </button>
</Link>

• 如果后续登出需要新增额外逻辑（比如清理全局状态、提示登出成功、上报埋点），直接在箭头函数的函数体内追加即可，示例：

onClick={() => {
  localStorage.clear()
  // 重置全局用户状态
  setUser(null)
}}

• 现有Link组件的to="/"配置已经可以满足点击后跳转首页的需求，不需要额外在点击事件里编写跳转逻辑。

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