url-state-management

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

URL State Management

URL状态管理

Sync React state to URL query parameters for shareable filters, search, and deep-linkable dialogs with nuqs.

使用nuqs将React状态同步到URL查询参数，实现可分享的筛选器、搜索功能和可深度链接的对话框。

Prerequisites

前置要求

Complete these recipes first (in order):

请按顺序完成以下教程：

Next.js on Vercel

Vercel上的Next.js

Create a Next.js app running on Bun, configure the development environment, and deploy to Vercel with automatic deployments on push.

bash

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

创建一个基于Bun运行的Next.js应用，配置开发环境，并部署到Vercel，实现推送代码时自动部署。

bash

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

Cookbook - Complete These Recipes in Order

教程手册 - 按顺序完成以下教程

URL State with nuqs

使用nuqs管理URL状态

Sync React state to URL query parameters for shareable filters, search queries, and deep links to modal dialogs. Preserves UI state on browser back/forward navigation.

bash

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nuqs-setup

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

bash

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nuqs-setup

Working with nuqs

nuqs的进阶使用

Manage React state in URL query parameters with nuqs. Covers Suspense boundaries, parsers, clearing state, and deep-linkable dialogs.

bash

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/using-nuqs

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

bash

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/using-nuqs