C26

可分享筛选

任务说明

Next.js 工程

把题目列表的筛选和分页写进 URL 查询参数：状态（all/todo/done）与标签（all/hooks/state/async）用链接切换，页码用上一页/下一页链接翻动，每页 3 条。要求刷新、浏览器回退、复制链接给他人打开都能恢复同一视图。searchParams 同样是 Promise，必须 await。验收方式：本练习无法自动判分。补齐 starter 后在 examples/exercises/next-c26-shareable-filter/starter 目录执行 npm install && npm run dev，浏览器访问 http://localhost:3000 按要求走查；tests/check.mjs 是结构自检（node tests/check.mjs starter 或 solution 目录路径）。关键走查：点筛选举证链接后 URL 带 ?status=todo&tag=hooks，刷新后列表不变；翻页时原筛选不丢。

要求

页面组件用 await searchParams 读取 status、tag、page
筛选和页码变化都通过 <Link>（或带查询参数的 URL）体现，不使用 useState 存筛选
切换某个筛选时保留其他筛选与合理页码，翻页时保留筛选
非法参数（未知状态/标签、页码小于 1 或超出范围）按默认值或边界处理，不抛错不白屏
空结果页显示可理解的提示而不是报错

N04 动态参数与搜索参数 N06 路由基础综合实践

分层提示

先自己试，再逐层展开。

参考答案

卡住时再看；查看操作会记录下来用于复盘。测试版本 1.0.0

可分享筛选

Command Palette