mcpField
I
integration-react-react-router-7-declarative

integration-react-react-router-7-declarative

github.com/posthog数据与数据库76102 次安装今天更新
代码仓库

关于 integration-react-react-router-7-declarative

用于在 React Router v7 声明式模式应用中添加 PostHog 分析的技能。它提供分阶段集成流程，并针对事件、用户识别、功能标记和错误跟踪给出框架指导。

主要功能

  1. 01四步集成流程
  2. 02React Router v7 声明式模式设置指导
  3. 03用户识别与会话关联
  4. 04功能标记 Hook 使用指导
  5. 05错误跟踪建议

适用场景

  1. 01为声明式模式应用添加 PostHog
  2. 02跟踪登录和注册用户
  3. 03在事件处理器中捕获分析数据
  4. 04为关键流程添加错误监控

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/posthog/skills --skill integration-react-react-router-7-declarative

安装后在 Claude Code 中输入/integration-react-react-router-7-declarative确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
basic-integration-1.0-begin.md
basic-integration-1.1-edit.md
basic-integration-1.2-revise.md
basic-integration-1.3-conclude.md
EXAMPLE.md
identify-users.md
react-router-v7-declarative-mode.md

详细介绍

React Router v7 - 声明式模式的 PostHog 集成

此技能可帮助你在 React Router v7 - 声明式模式应用中添加 PostHog 分析功能。

工作流

按以下步骤依次完成集成：

  1. basic-integration-1.0-begin.md - PostHog 设置 - 开始 ← 从这里开始
  2. basic-integration-1.1-edit.md - PostHog 设置 - 编辑
  3. basic-integration-1.2-revise.md - PostHog 设置 - 修订
  4. basic-integration-1.3-conclude.md - PostHog 设置 - 结论

参考文件

  • references/EXAMPLE.md - React Router v7 - 声明式模式示例项目代码
  • references/react-router-v7-declarative-mode.md - React Router v7 声明式模式 - 文档
  • references/identify-users.md - 识别用户 - 文档
  • references/basic-integration-1.0-begin.md - PostHog 设置 - 开始
  • references/basic-integration-1.1-edit.md - PostHog 设置 - 编辑
  • references/basic-integration-1.2-revise.md - PostHog 设置 - 修订
  • references/basic-integration-1.3-conclude.md - PostHog 设置 - 结论

示例项目展示了目标实现模式。请参阅文档了解 API 详情。

核心原则

  • 环境变量：始终使用环境变量存储 PostHog 密钥。切勿将其硬编码。
  • 最小改动：在现有集成旁添加 PostHog 代码。不要替换或重构现有代码。
  • 遵循示例：实现应尽可能贴合示例项目中的模式。

框架指南

  • 对于功能标志，请使用 useFeatureFlagEnabled() 或 useFeatureFlagPayload() 钩子——它们会自动处理加载状态和外部同步
  • 在用户操作发生的事件处理程序中添加分析事件捕获，不要在响应状态变化的 useEffect 中添加
  • 不要使用 useEffect 转换数据——应在渲染期间计算派生值
  • 不要使用 useEffect 响应用户事件——应将逻辑放在事件处理程序本身中
  • 不要使用 useEffect 链式更新状态——应在事件处理程序中一并计算所有相关更新
  • 不要使用 useEffect 通知父组件——应在事件处理程序中与 setState 一起调用父组件回调
  • 要在属性变化时重置组件状态，请将该属性作为组件的 key 传入，而不要使用 useEffect
  • useEffect 仅用于与外部系统（非 React 小部件、浏览器 API、网络订阅）同步

识别用户

在登录和注册事件期间识别用户。请参阅示例代码和文档，了解此框架的正确识别模式。如果前端和后端代码都存在，请使用 X-POSTHOG-DISTINCT-ID 和 X-POSTHOG-SESSION-ID 标头传递客户端会话和 distinct ID，以保持关联。

错误跟踪

在相关文件中添加 PostHog 错误跟踪，尤其是在关键用户流程和 API 边界附近。

评论

支持 Markdown