Next.js 的客户端页面路由详解-北京尧图网络

文章目录1. 路由的基本概念2. 客户端路由的核心(1) useRouter(2) Link / 组件(3) redirect()3. 动态路由与客户端获取参数4. 客户端路由和服务端路由的区别5. 路由案例1. app/layout.tsx 全局布局2. app/components/NavBar.tsx 导航栏3. app/page.tsx 首页4. app/blog/[id]/page.tsx 详情页效果1. 路由的基本概念在Next.js 15App Router 模式中路由主要依赖文件系统路由File-system routing所有页面都放在app/目录下app/ ├── page.tsx // 对应 / ├── about/ │ └── page.tsx // 对应 /about └── blog/ └── [id]/ └── page.tsx // 动态路由 /blog/123服务端渲染 (SSR)页面初次加载时由服务器返回 HTML。客户端路由 (CSR)在页面之间跳转时Next.js使用客户端路由器基于 React Router-like 机制来实现无刷新切换。2. 客户端路由的核心客户端路由由next/navigation提供主要用到两个Hook / API(1)useRouter用于编程式导航和 React Router 的useNavigate类似。use client;import{useRouter}fromnext/navigation;exportdefaultfunctionHome(){constrouteruseRouter();returnbutton onClick{()router.push(/about)}去 About 页面/button;}router.push(/path)跳转到某个页面保留历史记录。router.replace(/path)跳转但不保留历史记录。router.back()回退。(2)Link /组件推荐使用Link来实现预加载和无刷新跳转。importLinkfromnext/link;exportdefaultfunctionNavBar(){return(navLink href/首页/LinkLink href/about关于我们/Link/nav);}Link默认会预加载目标页面的代码提高切换速度。只有当目标在视口中可见时才会自动预加载。(3)redirect()用于服务端或客户端强制重定向。import{redirect}fromnext/navigation;exportdefaultfunctionPage(){constisLoginfalse;if(!isLogin){redirect(/login);}returndiv已登录/div;}3. 动态路由与客户端获取参数动态路由文件夹[id]会捕获 URL 中的参数。文件夹嵌套结构app/blog/[id]/page.tsx如下app/ ├── blog/ │ └── [id]/ │ └── page.tsx // 动态路由 /blog/123组件获取如下// app/blog/[id]/page.tsxuse client;import{useParams}fromnext/navigation;exportdefaultfunctionBlogPage(){constparamsuseParams();// { id: 123 }returnh1文章ID:{params.id}/h1;}// 如果是服务端渲染直接通过 params 获取exportdefaultfunctionBlogPage({params}:{params:{id:string}}){returnh1文章ID:{params.id}/h1;}上面这种方式只能获取一层动态路由参数不能获取嵌套路由参数例如/blog/123/comment/456就报错了。路由结构改用[...id]如下app/ ├── blog/ │ └── [...id]/ │ └── page.tsx // 动态路由 /blog/123/comment/456这样就可以获取到多层动态路由参数了。还有一种情况我们想让这个路由参数是可选的有没有都可以那么在外层再包裹一层中括号变成了[[...id]]如下app/ ├── blog/ │ └── [[...id]]/ │ └── page.tsx // 动态路由 /blog/123/comment/456动态路由总结[id]只能获取一层路由参数例如/blog/123。[...id]可以获取多层路由参数例如/blog/123/comment/456。[[...id]]路由参数是可选的有没有都可以例如/blog/123或/blog/123/comment/456。4. 客户端路由和服务端路由的区别特性服务端渲染 (SSR)客户端路由 (CSR)初次加载服务器生成 HTML前端只加载入口 HTML跳转整页刷新 / SSR无刷新跳转速度快数据获取通过fetch()/server actionsuseEffect/ SWR / TanStack QuerySEO强较弱需 SSR/ISR 支持Next.js 的优势就是两者结合—— 初次请求走 SSR后续页面切换走 CSR。5. 路由案例整个案例包含首页/有一个跳转按钮去详情页详情页/blog/[id]显示文章 ID导航栏组件全局无刷新跳转项目结构app/ ├── layout.tsx ├── page.tsx // 首页 ├── blog/ │ └── [id]/ │ └── page.tsx // 动态详情页 └── components/ └── NavBar.tsx // 导航栏1.app/layout.tsx全局布局import./globals.css;importNavBarfrom./components/NavBar;exportdefaultfunctionRootLayout({children}:{children:React.ReactNode}){return(html langenbodyNavBar/main{children}/main/body/html);}2.app/components/NavBar.tsx导航栏use client;importLinkfromnext/link;exportdefaultfunctionNavBar(){return(nav style{{display:flex,gap:20px,marginBottom:20px}}Link href/首页/LinkLink href/blog/123文章123/LinkLink href/blog/456文章456/Link/nav);}3.app/page.tsx首页use client;import{useRouter}fromnext/navigation;exportdefaultfunctionHomePage(){constrouteruseRouter();return(divh1首页/h1button onClick{()router.push(/blog/999)}style{{marginTop:20px}}去文章999/button/div);}4.app/blog/[id]/page.tsx详情页use client;import{useParams,useRouter}fromnext/navigation;exportdefaultfunctionBlogDetail(){constparamsuseParams();// { id: 123 }constrouteruseRouter();return(divh1文章详情/h1p当前文章ID:{params.id}/pbutton onClick{()router.back()}返回上一页/button/div);}效果打开/→ 首页可以点击「去文章 999」按钮 → 跳转/blog/999在导航栏点击/blog/123或/blog/456→ 跳转不同文章详情在详情页点「返回上一页」 → 回到首页感谢阅读想了解更多我的博客网站 | 记录思考分享干货我的个人主页 | 关于我、开源项目

Next.js 的客户端页面路由详解

相关推荐

从路径计算到空间智能：AI如何重塑下一代地图应用

MPC5634 eTPU：从协处理器架构到互补PWM实战开发指南

Linux查看能否访问地址的方法汇总

更多资讯

impeccable：声明式本地开发协议与PRODUCT.md元数据驱动实践

Open-AutoGLM 保姆级指南：一句话让手机替你比价下单

GTI-mSEMP框架：一种纳入攻防策略的恶意软件传播激励框架

飞腾D2000工作站怎么样？高性价比国产工作站的适配账怎么算

自研Blender自动绑定插件OpenRIG：架构、权重算法与踩坑实录

机械基础复习题做不对？根源是建模能力没养成

今日更新

学生选课系统DFD图绘制指南：边界划分与分层校验实战

JIRA敏捷落地：Scrum角色权限、Sprint与燃尽图避坑指南

SEMI S8人机工程验收实战：从条款拆解到现场实测的完整指南

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？