React导航后刷新页面如何不清除localStorage？

首先明确：navigate(0) 本质是触发浏览器页面刷新，而localStorage本身是持久化存储，刷新页面不会自动清空，你遇到的问题大概率是代码逻辑导致的，按以下步骤排查解决：

• 排查代码中是否存在主动清空localStorage的逻辑
  检查全局路由守卫、首页组件的useEffect、初始化逻辑里，有没有调用localStorage.clear()或者localStorage.removeItem('你的用户信息key')的代码。比如有些逻辑会在判断用户未登录时误删localStorage内容，刷新时如果判断逻辑有问题（比如还没读取到localStorage就执行删除），就会导致数据丢失。

• 确保用户信息写入localStorage的时机正确
  登录成功后，必须等用户信息完全写入localStorage再调用navigate(0)。如果登录请求是异步的，要确保在await请求返回后再执行存储和跳转：

  // 错误示例：还没等写入完成就刷新
  loginApi().then(res => {
    localStorage.setItem('userInfo', JSON.stringify(res.data))
  })
  navigate(0)
  
  // 正确示例：等待写入完成后再刷新
  const handleLogin = async () => {
    const res = await loginApi()
    localStorage.setItem('userInfo', JSON.stringify(res.data))
    navigate(0)
  }
  

• 避免用navigate(0)刷新页面，改用状态驱动渲染
  其实完全不需要强制刷新页面来更新首页内容。可以把用户信息存在全局状态（比如React Context、useState配合全局变量，或者状态管理库），登录成功后同时更新localStorage和全局状态，首页组件监听全局状态变化自动重新渲染：

  // 全局Context示例
  const UserContext = createContext(null)
  
  // 登录组件
  const Login = () => {
    const { setUser } = useContext(UserContext)
    const navigate = useNavigate()
  
    const handleLogin = async () => {
      const res = await loginApi()
      const userInfo = res.data
      localStorage.setItem('userInfo', JSON.stringify(userInfo))
      setUser(userInfo) // 更新全局状态
      navigate('/home') // 直接跳转，无需刷新
    }
  }
  
  // 首页组件
  const Home = () => {
    const { user } = useContext(UserContext)
    // 直接使用user状态，状态更新时自动重新渲染
    return <div>欢迎，{user.name}</div>
  }
  

• 验证浏览器localStorage的持久化能力
  可以在浏览器控制台执行localStorage.setItem('test', '123')，然后手动刷新页面，再执行localStorage.getItem('test')看是否返回123。如果这个操作后数据丢失，那可能是浏览器隐私设置（比如开启了隐私模式、设置了关闭浏览器自动清除数据），这种情况需要调整浏览器设置。

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