React Router useNavigate在onClick函数中跳转失效问题（含localStorage）

默认情况下，localStorage中存在名为"name"的数组，其下标[0]包含一个元素。在handleExitChat函数中，我尝试删除该localStorage项，并通过useNavigate返回的navigate方法将用户导向主页/。点击按钮后，localStorage的"name"项已按预期删除，但页面并未跳转到主页，只能手动输入URL跳转。想知道函数中navigate为何被阻止。

代码示例 #

import * as C from './styles';

import { useNavigate } from 'react-router-dom';

const Chat = () => {
  const navigate = useNavigate();

  const handleExitChat = async () => {
    const remove = await JSON.parse(localStorage.removeItem("name"))[0];
    navigate('/');
  }

  return (
    <C.Container>
       <C.RemoveChat>
         <button onClick={handleExitChat}>Logout</button>
       </C.RemoveChat>
    </C.Container>
  )
}

export default Chat;

报错信息 #

SyntaxError: "undefined" is not valid JSON
    at JSON.parse (<anonymous>)
    at handleExitChat (index.jsx:50:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)

问题原因与解决方案 #

核心问题 #

报错信息明确显示JSON.parse无法解析undefined——localStorage.removeItem("name")的返回值就是undefined，你试图对这个值执行JSON.parse，直接抛出语法错误导致函数执行中断，后续的navigate('/')根本没机会运行。另外，localStorage.removeItem是同步方法，代码里的async/await完全多余。

修正后的代码 #

import * as C from './styles';
import { useNavigate } from 'react-router-dom';

const Chat = () => {
  const navigate = useNavigate();

  const handleExitChat = () => {
    localStorage.removeItem("name");
    navigate('/');
  }

  return (
    <C.Container>
       <C.RemoveChat>
         <button onClick={handleExitChat}>Logout</button>
       </C.RemoveChat>
    </C.Container>
  )
}

export default Chat;

说明 #

1. 移除async/await：没有异步操作需要等待，保留会造成不必要的函数异步化
2. 简化删除逻辑：直接调用localStorage.removeItem("name")即可完成删除，不需要额外的解析操作
3. 函数正常执行：删除操作完成后，navigate('/')会被正常调用，页面就能顺利跳转到主页

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