NextJs教程系列(二)：路由

已于 2024-03-07 11:59:13 修改
阅读量321 收藏 5
点赞数 3
分类专栏： NextJs教程 文章标签： 前端 javascript 开发语言
于 2024-03-06 20:08:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuihao19970905/article/details/136516389
版权
本文详细介绍了Next.js的路由系统，其基于树形结构，遵循约定大于配置的原则。主要涉及page.js、layout.js等文件的作用和在不同状态下的加载。访问作者教程获取完整内容：https://blog.chdl.fun/ChBlog/docs/category/nextjs。
摘要由CSDN通过智能技术生成

介绍

NextJs的路由系统是NextJs的核心之一，先上一张图来感受下NextJs的路由系统。
路由系统

路由规则，约定大于配置

NextJs的路由系统是一个树形结构，最顶层是app目录，然后是路由文件，最后是具体的页面。

通过一张url和路由文件的映射关系图来直观的感受下：
terminology

NextJs的路由系统遵循了约定大于配置的元素，每个路由文件下可以包含如下的文件：
terminology-file

  • page.js: 必填 文件，在页面渲染后加载该文件, 用于渲染页面内容.
  • layout.js: 布局文件，在页面渲染前会先加载该文件, 用于渲染页面布局.
  • loading.js: 加载文件，在页面渲染前会先加载该文件, 用于渲染页面加载状态.
  • error.js: 错误文件，在页面渲染后加载该文件, 用于渲染页面错误状态.
  • not-found.js: 404文件，在页面渲染后加载该文件, 用于渲染页面404状态.

为了方便读者阅读完整的教程，可直接访问作者的教程文档`：
https://blog.chdl.fun/ChBlog/docs/category/nextjs

cuihaoweb
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Next.js 中的路由初学者指南，附有示例
qq_39652397的博客
03-12 5644
使用 Next.js 有很多好处，但一个非常有用的特性是它的文件路由系统。这种架构显着简化了在网站内创建路由的过程。在本教程中，我们将学习如何设置 Next.js 项目以及 Next.js 中的文件路由系统如何工作。 我们还将学习如何： 创建静态和动态页面 Link用, 以及它的一些 props实现页面转换 使用useRouter()钩子从 URL 获取查询参数 动态嵌套路由 ……还有更多。 我们将通过构建一个投资组合页面来了解所有这些。 Next.js 功能 Next.js 是一个基于 R
framer-motion-nextjs::cinema::clamp:成帧器运动和nextjs
05-07
Next.js是Vercel公司开发的一个开源的React框架，它支持服务器渲染（SSR）和静态站点生成（SSG），并提供了开箱即用的功能，如代码分割、路由管理和热模块替换。将Framer Motion与Next.js结合，可以实现预渲染时的...
Next.js 开发指南 路由篇 | 动态路由、路由组、平行路由和拦截路由
最新发布
sybh的博客
02-18 2248
实际项目开发的时候，有的路由场景会比较复杂，比如数据库里的文章有很多，我们不可能一一去定义路由，此时该怎么办？组织代码的时候，有的路由是用于移动端，有的路由是用于 PC 端，该如何组织？如何有条件的渲染页面，比如未授权的时候显示登录框？如何让同一个路由根据情况不同展示不同的内容？本篇我们会一一解决这些问题，在此篇，你将会感受到 App Router 强大的路由功能。
Next.js 学习笔记（三）——路由
Jackson_Mseven的博客
12-19 1234
本页将指导你如何在 Next.js 应用程序中定义和组织路由。要了解流式传输是如何在 React 和 Next.js 中工作的，首先理解服务端渲染（SSR）及其局限性是很有帮助的。首先，在服务器上获取给定页面的所有数据然后，服务器为页面渲染 HTML页面的 HTML、CSS 和 JavaScript 被发送到客户端使用生成的 HTML 和 CSS 显示非交互式用户界面最后，React水合（hydrates）用户界面，使其具有交互性。
Next.js 开发指南 路由篇 | App Router
sybh的博客
02-18 2408
路由（routers）是应用的重要组成部分。所谓路由，有多种定义，对于应用层的单页应用程序而言，路由是一个决定 URL 如何呈现的库，在服务层实现 API 时，路由是解析请求并将请求定向到处理程序的组件。简单的来说，在 Next.js 中，路由决定了一个页面如何渲染或者一个请求该如何返回。Next.js 目前有两套路由解决方案，之前的方案称之为“Pages Router”，目前的方案称之为“App Router”，两套方案是兼容的，都可以在 Next.js 中使用。
Next.js了解篇｜一文带你梳理清楚 Next.js 的功能
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
03-14 5850
前面写了好几篇关于 Next.js 的文章，虽然都不长，但都是实际使用过程中的一些经验分享，不过这些文章对于不了解 Next.js 的人来说，可能很不友好，我也一直想重新梳理一下 Next.js 使用的方案。因此打算好好写一下 Next.js 相关运用，并整理到一个专栏，主要内容会从了解 Next.js 开始，然后逐渐搭建一个完整的项目模板，让没怎么接触过 Next.js 甚至 React 的小伙...
nextjs博客：https：nextjs.orglearn
02-19
Next.js是React的一个官方库，由Vercel公司维护，它为React应用提供了服务器端渲染（SSR）和静态生成（Static Site Generation, SSG）的能力，同时还包括了路由、代码分割、预渲染等功能，极大地简化了全栈开发流程...
AngularJS入门教程二：在路由中传递参数的方法分析
12-09
例如，下面的代码展示了如何配置一个名为`/user/:age`的路由： ```javascript .config(['$routeProvider', function($routeProvider) { $routeProvider .when('/user/:age', { templateUrl: 'list.html', ...
nextjs博客：Nextjs教程
02-12
通过本教程，您将学习如何使用 Next.js 创建一个功能完善的博客系统，包括文章列表、详情页、搜索等功能，并掌握如何处理数据获取、路由、样式和部署等关键点。在实践中不断探索，Next.js 将帮助您构建高性能、易于...
u-template-nextjs-onepage:NextJS一页网站模板
05-24
NextJS的路由系统非常适合构建此类应用，通过动态路由和组件的按需加载，可以实现流畅的导航体验。 4. **设计系统**: Storybook是一个独立的开发环境，用于构建和维护UI组件库。它提供了实时预览、文档生成、交互式...
js实现自定义路由
10-20
本文介绍了js实现自定义路由，主要是事件hashchange的使用，然后根据我们的业务需求封装。具有很好的参考价值，下面跟着小编一起来看下吧
react-nextjs简化的自定义路由
08-15
next.js简化的自定义路由
next-routes, Next.js的通用动态路由.zip
10-09
next-routes, Next.js的通用动态路由 Next.js 动态路由 易于使用通用动态路由的Next.js表达式和参数匹配面向 express &的请求处理程序中间件通过路由定义生成url的Link 和 Router：如何使用安装：npm
nextjs 路由
weixin_43871341的博客
04-14 1812
1.官网路由介绍nextjs路由 next项目的路由默认为page下面的文件生成对应的路由。 http://localhost:3000/ 代表的 /page/index.tsx. http://localhost:3000/demo指的是page --> demo -->index.tsx文件。 2.动态路由 在 Next.js 中，您可以将括号添加到页面 ([param]) 以创建动态路由（也称为 url slugs、pretty urls 等）。pages/post/[pid..
Next.js-基于文件的路由
m0_54644067的博客
12-02 1385
在 Next.js 中，一个 page（页面） 就是一个从 .js、jsx、.ts 或 .tsx 文件导出（export）的 React 组件 ，这些文件存放在 pages 目录下。每个page（页面）都使用其文件名作为路由（route）。如果你创建了一个命名为的文件并导出（export）一个如下所示的 React 组件，则可以通过 /about 路径进行访问。
next.js动态路由
m0_66809099的博客
05-29 521
1.创建[动态的值].tsx。3.当前页面获取动态的值。next想要使用动态路由。
Nextjs 的 App Router 路由模式核心概念简介
AaronZZH 的博客
04-26 3171
Nextjs 13 引入了新的应用路由器，它建立在服务端组件之上，支持布局、嵌套路由、加载状态、错误处理等等。本文将介绍 App Router 新路由模型的基本概念。
Next.js 导航和路由跳转
天问博客-专注于大前端技术
01-22 1555
在构建现代化的 React 应用程序时，良好的导航和路由管理是至关重要的。Next.js 提供了强大的导航和路由系统，使得开发者能够轻松地实现页面之间的切换和传递数据。本文将深入介绍 Next.js 中的导航和路由跳转，帮助你更好地理解和应用这些功能。
Next.js - 动态路由
不想写代码的一天
08-17 1539
例如，app/shop/[...slug]/page.js 将匹配 /shop/clothes，但也会匹配 /shop/clothes/tops、/shop/clothes/tops/t-shirts 等。例如，app/shop/[[…slug]]/page.js也将匹配/shop，此外还有/shop/衣服、/shop/服装/上衣、/shop/服装/上衣/t恤。如博客可以包含以下路由 app/blog/[slug]/page.js，其中 [slug] 是博客文章的动态分段。
h3c网络学院系列教程:路由交换技术 pdf
11-28
“H3C网络学院系列教程：路由交换技术”是一本介绍路由交换技术的教程，内容涵盖了网络路由和交换的基本原理、技术特点、协议规范等方面的知识。本教程结合H3C公司的网络产品，对路由器和交换机的使用、配置和管理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值