mars
1ba859196a
- 修复DashboardLayout中的退出登录函数，确保清除所有认证信息 - 恢复_app.tsx中的认证逻辑，确保仪表盘页面需要登录访问 - 完善退出登录流程：清除本地存储 -> 调用登出API -> 重定向到登录页面 - 添加错误边界组件提升用户体验 - 优化React水合错误处理 - 添加JWT令牌验证API - 完善各个仪表盘页面的功能和样式
95 lines
2.8 KiB
Markdown
95 lines
2.8 KiB
Markdown
# 水合错误修复指南
|
||
|
||
## 问题描述
|
||
应用出现 React 水合错误（Hydration Error），导致整个根节点切换到客户端渲染。
|
||
|
||
## 修复措施
|
||
|
||
### 1. 客户端挂载检测
|
||
- 创建了 `useClientMount` hook 来检测组件是否在客户端已挂载
|
||
- 在客户端挂载之前显示简化的加载状态，避免服务器端和客户端渲染不一致
|
||
|
||
### 2. 错误边界组件
|
||
- 创建了 `ErrorBoundary` 组件来捕获和处理 React 错误
|
||
- 提供友好的错误界面和恢复选项
|
||
- 特别处理水合错误的显示和调试
|
||
|
||
### 3. 调试工具
|
||
- 创建了 `hydrationDebug` 工具来帮助诊断水合错误
|
||
- 提供安全的浏览器 API 访问方法
|
||
- 自动检查环境变量一致性
|
||
|
||
### 4. Next.js 配置优化
|
||
- 暂时禁用 React 严格模式以减少开发环境的水合警告
|
||
- 添加实验性配置来优化页面加载
|
||
- 配置编译器选项
|
||
|
||
### 5. 代码修改
|
||
|
||
#### pages/_app.tsx
|
||
- 添加客户端挂载检测
|
||
- 使用 `suppressHydrationWarning` 属性
|
||
- 包装错误边界组件
|
||
|
||
#### components/Layout.tsx
|
||
- 添加客户端挂载检测
|
||
- 在客户端挂载前返回简化布局
|
||
|
||
#### utils/useClientMount.ts
|
||
- 检测组件是否在客户端已挂载的 hook
|
||
|
||
#### utils/hydrationDebug.ts
|
||
- 开发环境的水合错误调试工具
|
||
|
||
#### components/ErrorBoundary.tsx
|
||
- React 错误边界组件，特别处理水合错误
|
||
|
||
## 使用建议
|
||
|
||
### 1. 开发环境
|
||
- 打开浏览器控制台查看详细的调试信息
|
||
- 使用 `hydrationDebug` 工具提供的安全方法访问浏览器 API
|
||
|
||
### 2. 生产环境
|
||
- 错误边界会提供友好的错误界面
|
||
- 用户可以通过刷新页面或返回上一页来恢复
|
||
|
||
### 3. 常见水合错误原因
|
||
1. 服务器端和客户端渲染不同内容
|
||
2. 在 useEffect 中运行服务器端代码
|
||
3. 日期/时间差异
|
||
4. 随机值
|
||
5. 浏览器特定 API
|
||
6. localStorage/sessionStorage 访问
|
||
7. Window 对象访问
|
||
|
||
## 最佳实践
|
||
|
||
### 1. 避免水合错误
|
||
- 使用 `useClientMount` hook 检测客户端挂载
|
||
- 避免在初始渲染时访问浏览器 API
|
||
- 使用 `suppressHydrationWarning` 属性（谨慎使用）
|
||
|
||
### 2. 错误处理
|
||
- 始终包装错误边界组件
|
||
- 提供友好的错误恢复选项
|
||
- 在开发环境中记录详细的错误信息
|
||
|
||
### 3. 性能优化
|
||
- 使用 `useIsomorphicLayoutEffect` 处理服务器端渲染
|
||
- 优化初始加载状态
|
||
- 避免不必要的重新渲染
|
||
|
||
## 测试步骤
|
||
|
||
1. 刷新页面确认水合错误是否消失
|
||
2. 检查浏览器控制台是否有新的错误信息
|
||
3. 测试错误边界是否正常工作
|
||
4. 验证加载状态是否正确显示
|
||
|
||
## 注意事项
|
||
|
||
- `suppressHydrationWarning` 应谨慎使用，只在必要时使用
|
||
- 错误边界不会捕获异步错误，需要额外的错误处理
|
||
- 在生产环境中，调试信息会被自动隐藏
|
||
- 定期检查和更新错误处理逻辑 |