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→ 跳转不同文章详情在详情页点「返回上一页」 → 回到首页 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目