Safari浏览器useState布尔值不更新、Auth Context存localStorage为null及useParams页面404咨询

1. localStorage中loggedIn值为null问题 #

问题原因 #

• 代码本身缺少容错处理：localStorage.getItem('logged-in')在对应key不存在时会返回null，直接执行JSON.parse(null)得到的结果就是null，赋值给loggedIn状态后，监听loggedIn变化的useEffect会把null写入localStorage，形成恶性循环覆盖原有有效值
• Safari端特殊策略触发：
  • 用户开启Safari隐私浏览模式时，localStorage的持久化写入会被静默限制，存储的值页面刷新后就会失效
  • 近期Safari智能跟踪预防（ITP）策略更新，若用户7天内未访问站点，第一方localStorage会被自动清理，导致取值为空

修复方案 #

• 给localStorage读取逻辑添加兜底判断，避免直接解析null：

useEffect(() => {
  const data = localStorage.getItem('logged-in');
  // 存储值不存在/解析失败时默认赋值为false
  setLoggedin(data ? JSON.parse(data) : false);
  setLoading(false);
}, [])

• 修改退出登录逻辑，不要直接调用localStorage.clear()清空所有存储，只删除业务相关存储项，避免误伤其他业务数据：

const logout = () => {
  localStorage.removeItem('logged-in');
  localStorage.removeItem('userToken');
  setTimeout(() => {
    setLoggedin(false);
  }, 1000);
};

• 可添加localStorage可用性检测，兼容Safari隐私浏览模式，检测失败时降级使用sessionStorage或内存存储状态。

2. react-router-dom动态参数页Safari 404问题 #

问题原因 #

• 你使用了HTML5 History模式的路由（即createBrowserRouter），但服务端未配置对应404 fallback规则：Safari访问嵌套路由时会优先向服务端请求对应路径资源，服务端没有配置把所有路由请求重定向到index.html的规则时，就会直接返回404；Chrome则会优先尝试客户端路由匹配，所以表现正常
• 使用的react-router-dom版本存在Safari兼容bug，v6早期个别版本对Safari的URL解析逻辑异常，导致动态参数路由匹配失败
• 站点部署在子路径下时未配置basename参数，Safari的路径解析规则和Chrome不一致，会出现路由匹配失败

修复方案 #

• 配置服务端规则：所有非静态资源的请求全部重定向到单页应用的index.html，交由客户端路由接管匹配逻辑
• 本地开发环境下开启路由fallback配置：Vite项目在vite.config.js中添加server: { historyApiFallback: true }，Webpack项目在devServer配置中开启historyApiFallback: true
• 升级react-router-dom到最新稳定版，规避已知的Safari兼容bug
• 站点部署在子路径下时，给createBrowserRouter传入正确的basename参数，比如部署在/dashboard路径下则配置basename: '/dashboard'

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