mcpField
U
url-state-management

url-state-management

github.com/andrelandgraf开发23123 次安装20 周前更新
代码仓库

关于 url-state-management

面向 React 开发者的技能，介绍使用 nuqs 将 React 状态同步到 URL 查询参数，以支持可分享筛选、搜索和弹窗深链，并保留浏览器前进后退时的界面状态。

主要功能

  1. 01同步 React 状态与 URL 查询参数
  2. 02支持可分享的筛选与搜索
  3. 03支持弹窗深层链接
  4. 04保留浏览器前进后退状态

适用场景

  1. 01分享筛选条件或搜索结果
  2. 02通过链接打开指定弹窗
  3. 03浏览器导航时恢复界面状态

安装

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

$npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill url-state-management

安装后在 Claude Code 中输入/url-state-management确认已加载。

详细介绍

URL 状态管理

使用 nuqs 将 React 状态同步到 URL 查询参数，实现可分享的筛选条件、搜索和可通过深层链接打开的对话框。

前置条件

请先按顺序完成以下配方：

Next.js on Vercel

创建一个在 Bun 上运行的 Next.js 应用，配置开发环境，并设置推送代码后自动部署到 Vercel。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nextjs-on-vercel

教程集 — 按顺序完成以下配方

使用 nuqs 管理 URL 状态

使用 nuqs 将 React 状态同步到 URL 查询参数，实现可分享的筛选条件、搜索查询和指向模态对话框的深层链接。在浏览器前进或后退时保留 UI 状态。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nuqs-setup
URL 状态模式

使用 nuqs 在 URL 查询参数中管理 React 状态。涵盖 Suspense 边界、解析器、清除状态和可通过深层链接打开的对话框。

bunx skills add andrelandgraf/fullstackrecipes/skills -s url-state-patterns

评论

支持 Markdown