SuperAPI AI 工具集

url-state-patterns

前端与建站

查看项目

更新于 10-15 16:49

技能介绍

用途:该技能用于把 React 状态同步到 URL 查询参数(基于 nuqs),从而构建可分享、可深链接的界面状态,例如筛选条件、搜索输入和对话框可见性。

主要能力:

  • Suspense 包装:nuqs 读取 useSearchParams,需要 Suspense 边界。做法是导出一个公开包装组件,内部挂起客户端组件,使用方无需自行添加 Suspense。
  • 解析器:用 useQueryState 配合解析器替代 useState,例如 parseAsString、parseAsBoolean、parseAsArrayOf,并用 .withDefault() 读取回退值同时保持 URL 干净。
  • 清除参数:将值设为 null 即可从 URL 移除该参数;配合 .withDefault() 时参数被清除但读取返回默认值。
  • 可深链接对话框:由 URL 参数驱动对话框可见性,使其可分享并支持前进/后退,同样用 Suspense 模式包装。通过设置参数即可从任意位置打开,例如 setDeleteId("item-123") 生成深链接 /items?delete=item-123。

使用方式:先完成 URL State with nuqs 前置设置。导出带 Suspense 的公开包装组件,内部客户端组件调用 useQueryState 与相应解析器,输入变化时调用 setter,清除时传 null。

适用场景:可分享的筛选、搜索、可深链接的对话框等需要将 UI 状态反映到 URL 的 React 应用。

限制:资料未提供安装命令、版本要求、收费信息及其他平台支持情况。