尧图网页设计 
文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载本文基于 TILToday I Learned仓库中的 push-a-route-with-a-url-object.md 技术笔记讲解 Next.js Page Router 下router.push的两种传参方式——字符串与 URL 对象。笔记的核心观点是当路由涉及查询参数query params时对象形式比字符串拼接更不易出错、更适合程序化操作。读完本文你将掌握两种方式的适用场景、URL 对象的字段结构以及如何在组件中通过解构与shallow选项安全地增删 query 参数仓库内另有 remove-a-query-param-from-the-url.md 给出了完整的实战代码可直接对照阅读。两种跳转方式字符串 vs URL 对象Next.js 的next/router提供了push方法用于页面间过渡它同时接受两种类型的参数。仓库笔记原文指出There are two ways of using the Next.js router to transition to another route usingpush.方式一传入字符串简单路由的首选最常见的方式是直接传入一个字符串router.push(/search?tagreact)字符串形式对简单、静态的路由非常合适目标路径固定、参数固定一眼就能看懂跳转到哪里。方式二传入 URL 对象程序化操作更顺手第二种方式是传入一个 URL 对象URL Object替代字符串router.push({ pathname: /search, query: { tag: react } })两种写法最终都会把用户带到/search?tagreact区别在于代码的组织方式。笔记作者的原话是I find objects a bit easier to work with, than strings, when doing programmatic things. Especially when it comes to adding and removing query params.—— 做程序化的操作时对象比字符串更好用尤其是涉及 query 参数的增删时。URL 对象的结构pathname 与 query从上面的示例可以看到 URL 对象由两个核心字段组成字段作用示例pathname目标页面在应用内的路径/search、/posts/[id]query查询参数对象键值对形式{ tag: react }、{ page: 2 }除此之外Next.js 官方的 URL 对象定义还允许使用hash字段来指定页面内的锚点hash 值需要自行带上#前缀例如router.push({ pathname: /docs, hash: #installation })会跳转到/docs#installation。需要说明的是仓库笔记中实际演示的是pathname与query两个字段hash属于官方 API 的补充能力可结合实际需求选用。为什么对象形式更不易出错当 query 参数是运行期动态计算出来的值时字符串形式要求手工拼接// 字符串拼接参数一多转义和顺序就容易出错 router.push(/search?tag${tag}sort${sort}page${page})而对象形式把参数作为独立的数据结构交给 Next.js 处理由框架负责序列化与编码router.push({ pathname: /search, query: { tag, sort, page } })相比字符串插值对象形式天然规避了两类问题一是忘记对参数值做 URL 编码导致特殊字符破坏 URL 结构二是拼接顺序与引号、符号的人为失误。这也正是原文档将字符串插值称为error-prone string interpolation易出错的字符串插值的原因。在组件中获取 router 实例要让上面的router.push真正可运行需要先从next/router引入useRouter钩子拿到router实例import { useRouter } from next/router function SearchLink() { const router useRouter() const handleSearch () { router.push({ pathname: /search, query: { tag: react } }) } return button onClick{handleSearch}搜索 React 相关内容/button }useRouter返回的router对象不仅提供push还携带当前路由信息如pathname、query这在下面的增删 query 参数实战中会同时用到。实战用 URL 对象增删 query 参数shallow 路由仓库中的姊妹笔记 remove-a-query-param-from-the-url.md 完整展示了 URL 对象在真实场景中的用法当用户带着特殊 query 参数如 OAuth 回调携带的code进入页面时提取其值、处理后把它从 URL 中移除。假设组件加载时 URL 为/home?code123import React, { useEffect } from react; import { useRouter } from next/router; function SomeComponent() { const router useRouter(); useEffect(() { // 从 query 参数中解构出目标值其余参数保留 const { code, ...updatedQuery } router.query; if (!!code) { // 用提取出来的参数做业务处理如换取 token doSomethingWithCode(code); // 构造新的路由对象路径不变query 只剩其余参数 const newPathObject { pathname: router.pathname, query: updatedQuery } // 更新 URL且不重新触发数据获取 router.push(newPathObject, undefined, { shallow: true }); } }, []) return ( // 组件 JSX... ); }这段代码把 URL 对象的实战价值体现得淋漓尽致读取router.query直接给出当前 query 参数的键值对象处理通过对象解构const { code, ...updatedQuery } router.query把要移除的参数与剩余参数分离天然做到只删一个、保留其他重构用router.pathname当前路径与updatedQuery剩余参数拼装出新的 URL 对象再交给router.push落地router.push的第三个参数传入{ shallow: true }实现浅路由——只更新 URL不重新触发getServerSideProps/getStaticProps等数据获取逻辑。执行完成后URL 从/home?code123变为/home且code值已被消费。整个过程没有一行字符串拼接全是对象操作这正是笔记所强调的对象比字符串更适合程序化处理的直接证据。关于router.push的第三个参数options从上面的代码可以看到router.push(url, as, options)除了 URL 参数外还接受可选的as浏览器地址栏显示的路由可用于伪装路径与options配置对象。仓库文档实际用到的是shallow选项置为true时只更新地址栏 URL 而不重新触发数据获取适合调整 URL 但页面数据不变的场景。这一点在原文档的 remove-a-query-param-from-the-url.md 中被明确标注为so that data doesnt get refetched避免数据被重新获取。使用边界Page Router 与 App Router 的差异需要明确适用前提以上全部内容针对 Next.js 的Page Router即next/router提供的useRouter与router.push这也是原文档所对应的路由体系。原文档示例中router.push直接接收字符串或对象正是 Page Router 的 API 形态。如果项目使用较新的App Router路由跳转的 API 发生了变化客户端路由应改用next/navigation导出的useRouter其push方法只接受字符串不接受 URL 对象服务端组件内的跳转则使用next/navigation的redirect函数直接在组件中调用即可完成重定向。仓库中的 redirect-an-unauthorized-user.md 笔记对比了这两种体系下的服务端重定向写法getServerSideProps返回redirect响应 vs App Router 中直接调用redirect(/posts)可作为了解两套路由差异的补充材料。小结简单、静态的路由直接用字符串router.push(/search?tagreact)涉及动态 query 参数、需要增删参数时优先用 URL 对象router.push({ pathname: /search, query: { tag: react } })把编码与序列化交给框架配合router.query的解构与{ shallow: true }选项可以实现改 URL 不刷数据的轻量导航注意区分 Page Routernext/router与 App Routernext/navigation的 API 差异。仓库延伸阅读主文档push-a-route-with-a-url-object.md完整实战remove-a-query-param-from-the-url.md服务端重定向redirect-an-unauthorized-user.mdNext.js 分类下的全部笔记README.md 中的 Next.js 章节赞分享文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载相关推荐eslint-plugin-unicorn 规则解析prefer-url-href —— 用 URLhref 替代 URL 对象字符串化eslint plugin unicorn 规则解析prefer url href —— 用 URL href 替代 URL 对象字符串化 prefer urLint代码质量用空字节拼接揭示 Elixir 字符串的二进制表示TIL 实战技巧用空字节拼接揭示 Elixir 字符串的二进制表示TIL 实战技巧 在 Elixir 中字符串本质上就是 UTF 8 编码的二进制数据binary。本文档教程知识库Rome useTemplate 规则详解用模板字符串替代字符串拼接的检测与自动修复Rome useTemplate 规则详解用模板字符串替代字符串拼接的检测与自动修复 Rome当前仓库 tools 内置的 useTemplate 代码风开发工具Lint格式化前端构建编译器代码质量编辑器上一篇探秘高效网络请求库——Luch Request下一篇SerenityOS uptime 命令详解从 man 手册到内核时钟的完整链路创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Next.js 路由跳转：用 URL 对象调用 router.push 替代字符串拼接（TIL 笔记实战）
文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载本文基于 TILToday I Learned仓库中的 push-a-route-with-a-url-object.md 技术笔记讲解 Next.js Page Router 下router.push的两种传参方式——字符串与 URL 对象。笔记的核心观点是当路由涉及查询参数query params时对象形式比字符串拼接更不易出错、更适合程序化操作。读完本文你将掌握两种方式的适用场景、URL 对象的字段结构以及如何在组件中通过解构与shallow选项安全地增删 query 参数仓库内另有 remove-a-query-param-from-the-url.md 给出了完整的实战代码可直接对照阅读。两种跳转方式字符串 vs URL 对象Next.js 的next/router提供了push方法用于页面间过渡它同时接受两种类型的参数。仓库笔记原文指出There are two ways of using the Next.js router to transition to another route usingpush.方式一传入字符串简单路由的首选最常见的方式是直接传入一个字符串router.push(/search?tagreact)字符串形式对简单、静态的路由非常合适目标路径固定、参数固定一眼就能看懂跳转到哪里。方式二传入 URL 对象程序化操作更顺手第二种方式是传入一个 URL 对象URL Object替代字符串router.push({ pathname: /search, query: { tag: react } })两种写法最终都会把用户带到/search?tagreact区别在于代码的组织方式。笔记作者的原话是I find objects a bit easier to work with, than strings, when doing programmatic things. Especially when it comes to adding and removing query params.—— 做程序化的操作时对象比字符串更好用尤其是涉及 query 参数的增删时。URL 对象的结构pathname 与 query从上面的示例可以看到 URL 对象由两个核心字段组成字段作用示例pathname目标页面在应用内的路径/search、/posts/[id]query查询参数对象键值对形式{ tag: react }、{ page: 2 }除此之外Next.js 官方的 URL 对象定义还允许使用hash字段来指定页面内的锚点hash 值需要自行带上#前缀例如router.push({ pathname: /docs, hash: #installation })会跳转到/docs#installation。需要说明的是仓库笔记中实际演示的是pathname与query两个字段hash属于官方 API 的补充能力可结合实际需求选用。为什么对象形式更不易出错当 query 参数是运行期动态计算出来的值时字符串形式要求手工拼接// 字符串拼接参数一多转义和顺序就容易出错 router.push(/search?tag${tag}sort${sort}page${page})而对象形式把参数作为独立的数据结构交给 Next.js 处理由框架负责序列化与编码router.push({ pathname: /search, query: { tag, sort, page } })相比字符串插值对象形式天然规避了两类问题一是忘记对参数值做 URL 编码导致特殊字符破坏 URL 结构二是拼接顺序与引号、符号的人为失误。这也正是原文档将字符串插值称为error-prone string interpolation易出错的字符串插值的原因。在组件中获取 router 实例要让上面的router.push真正可运行需要先从next/router引入useRouter钩子拿到router实例import { useRouter } from next/router function SearchLink() { const router useRouter() const handleSearch () { router.push({ pathname: /search, query: { tag: react } }) } return button onClick{handleSearch}搜索 React 相关内容/button }useRouter返回的router对象不仅提供push还携带当前路由信息如pathname、query这在下面的增删 query 参数实战中会同时用到。实战用 URL 对象增删 query 参数shallow 路由仓库中的姊妹笔记 remove-a-query-param-from-the-url.md 完整展示了 URL 对象在真实场景中的用法当用户带着特殊 query 参数如 OAuth 回调携带的code进入页面时提取其值、处理后把它从 URL 中移除。假设组件加载时 URL 为/home?code123import React, { useEffect } from react; import { useRouter } from next/router; function SomeComponent() { const router useRouter(); useEffect(() { // 从 query 参数中解构出目标值其余参数保留 const { code, ...updatedQuery } router.query; if (!!code) { // 用提取出来的参数做业务处理如换取 token doSomethingWithCode(code); // 构造新的路由对象路径不变query 只剩其余参数 const newPathObject { pathname: router.pathname, query: updatedQuery } // 更新 URL且不重新触发数据获取 router.push(newPathObject, undefined, { shallow: true }); } }, []) return ( // 组件 JSX... ); }这段代码把 URL 对象的实战价值体现得淋漓尽致读取router.query直接给出当前 query 参数的键值对象处理通过对象解构const { code, ...updatedQuery } router.query把要移除的参数与剩余参数分离天然做到只删一个、保留其他重构用router.pathname当前路径与updatedQuery剩余参数拼装出新的 URL 对象再交给router.push落地router.push的第三个参数传入{ shallow: true }实现浅路由——只更新 URL不重新触发getServerSideProps/getStaticProps等数据获取逻辑。执行完成后URL 从/home?code123变为/home且code值已被消费。整个过程没有一行字符串拼接全是对象操作这正是笔记所强调的对象比字符串更适合程序化处理的直接证据。关于router.push的第三个参数options从上面的代码可以看到router.push(url, as, options)除了 URL 参数外还接受可选的as浏览器地址栏显示的路由可用于伪装路径与options配置对象。仓库文档实际用到的是shallow选项置为true时只更新地址栏 URL 而不重新触发数据获取适合调整 URL 但页面数据不变的场景。这一点在原文档的 remove-a-query-param-from-the-url.md 中被明确标注为so that data doesnt get refetched避免数据被重新获取。使用边界Page Router 与 App Router 的差异需要明确适用前提以上全部内容针对 Next.js 的Page Router即next/router提供的useRouter与router.push这也是原文档所对应的路由体系。原文档示例中router.push直接接收字符串或对象正是 Page Router 的 API 形态。如果项目使用较新的App Router路由跳转的 API 发生了变化客户端路由应改用next/navigation导出的useRouter其push方法只接受字符串不接受 URL 对象服务端组件内的跳转则使用next/navigation的redirect函数直接在组件中调用即可完成重定向。仓库中的 redirect-an-unauthorized-user.md 笔记对比了这两种体系下的服务端重定向写法getServerSideProps返回redirect响应 vs App Router 中直接调用redirect(/posts)可作为了解两套路由差异的补充材料。小结简单、静态的路由直接用字符串router.push(/search?tagreact)涉及动态 query 参数、需要增删参数时优先用 URL 对象router.push({ pathname: /search, query: { tag: react } })把编码与序列化交给框架配合router.query的解构与{ shallow: true }选项可以实现改 URL 不刷数据的轻量导航注意区分 Page Routernext/router与 App Routernext/navigation的 API 差异。仓库延伸阅读主文档push-a-route-with-a-url-object.md完整实战remove-a-query-param-from-the-url.md服务端重定向redirect-an-unauthorized-user.mdNext.js 分类下的全部笔记README.md 中的 Next.js 章节赞分享文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载相关推荐eslint-plugin-unicorn 规则解析prefer-url-href —— 用 URLhref 替代 URL 对象字符串化eslint plugin unicorn 规则解析prefer url href —— 用 URL href 替代 URL 对象字符串化 prefer urLint代码质量用空字节拼接揭示 Elixir 字符串的二进制表示TIL 实战技巧用空字节拼接揭示 Elixir 字符串的二进制表示TIL 实战技巧 在 Elixir 中字符串本质上就是 UTF 8 编码的二进制数据binary。本文档教程知识库Rome useTemplate 规则详解用模板字符串替代字符串拼接的检测与自动修复Rome useTemplate 规则详解用模板字符串替代字符串拼接的检测与自动修复 Rome当前仓库 tools 内置的 useTemplate 代码风开发工具Lint格式化前端构建编译器代码质量编辑器上一篇探秘高效网络请求库——Luch Request下一篇SerenityOS uptime 命令详解从 man 手册到内核时钟的完整链路创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考