Next中的App Router

news/2024/4/30 4:16:28/文章来源:https://blog.csdn.net/QZXSY1/article/details/137607924

在next的13版本中,推出了一个新的App路由,由React Server Components构建,它支持共享布局、内部路由、加载状态、错误处理等。
App路由的工作目录在app目录中,app目录独立于pages目录,允许你一些路由使用pages目录,保持原先的行为,而一些使用新的App Router。
App Router的优先级高于Pages Router。两种方式出现重复的URL时,在编译期间会报错。
默认的,在app目录中的components均为Server component。

和Pages router类似,App router同样使用文件系统的目录结构

  • 文件夹用于定义路由。路由由文件夹嵌套路径决定,遵循文件系统的层次结构,从根文件夹一直到包含page.js文件的最终子文件夹
  • 文件夹被用于创建路由下的ui

每一个文件夹在路径中都表示为路由中的一个片段。

nextjs中的目录,可以创建特殊的文件夹,来实现特殊的功能

  • layout 定义共享的ui,对子文件夹也生效
  • page 单独的页面,且可公开访问
  • loading 加载的页面,对子文件夹也生效
  • not-found 404页面,对子文件夹也生效
  • error 错误是的页面,对子文件夹也生效
  • global-error 全局错误页面
  • route 服务端api endpoint
  • template 存放模板
  • default 回滚ui,为并行路由

next中也包含一些特殊的文件,这些文件均为一种特殊的component,可以在react中直接使用

  • layout.js
  • template.js
  • error.js
  • loading.js(Suspense)
  • not-found.js(ErrorBoundary)
  • page.js
<Layout><Template></Template>
</Layout>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1046069.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

持续交付工具Argo CD的部署使用

Background CI/CD&#xff08;Continuous Integration/Continuous Deployment&#xff09;是一种软件开发流程&#xff0c;旨在通过自动化和持续集成的方式提高软件交付的效率和质量。它包括持续集成&#xff08;CI&#xff09;和持续部署&#xff08;CD&#xff09;两个主要阶…

Day5-Hive的结构和优化、数据文件存储格式

Hive 窗口函数 案例 需求&#xff1a;连续三天登陆的用户数据 步骤&#xff1a; -- 建表 create table logins (username string,log_date string ) row format delimited fields terminated by ; -- 加载数据 load data local inpath /opt/hive_data/login into table log…

怎么保证缓存与数据库的最终一致性?

目录 零.读数据的标准操作 一.Cache aside Patten--旁路模式 二.Read/Write Through Pattern--读写穿透 三.Write Back Pattern--写回 四.运用canal监听mysql的binlog实现缓存同步 零.读数据的标准操作 这里想说的是不管哪种模式读操作都是一样的&#xff0c;这是一种统一…

【开源社区】openEuler、openGauss、openHiTLS、MindSpore

【开源社区】openEuler、openGauss、openHiTLS、MindSpore 写在最前面开源社区参与和贡献的一般方式开源技术的需求和贡献方向 openEuler 社区&#xff1a;开源系统官方网站官方介绍贡献攻略开源技术需求 openGauss 社区&#xff1a;开源数据库官方网站官方介绍贡献攻略开源技术…

Unity之Unity面试题(五)

内容将会持续更新&#xff0c;有错误的地方欢迎指正&#xff0c;谢谢! Unity之Unity面试题&#xff08;五&#xff09; TechX 坚持将创新的科技带给世界&#xff01; 拥有更好的学习体验 —— 不断努力&#xff0c;不断进步&#xff0c;不断探索 TechX —— 心探索、心进取…

目标检测——RCNN系列学习(二)Faster RCNN

接着上一篇文章&#xff1a;目标检测——RCNN系列学习(一&#xff09;-CSDN博客 主要内容包含&#xff1a;Faster RCNN 废话不多说。 Faster RCNN [1506.01497] Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks (arxiv.org)https://arxiv.…

跨域问题一文解决

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;Vue ⛺️稳中求进&#xff0c;晒太阳 一、为什么会出现跨域的问题&#xff1f; 是浏览器的同源策略&#xff0c;跨域也是因为浏览器这个机制引起的&#xff0c;这个机制的存在还是在于安全…

Netty 入门应用之Http服务WebSocket

Netty实现Http服务 主要的变化是在初始化器中引入了新的编解码器 一些创建的类作用和Netty HelloWorld的小demo一样我这里就不再次重复了 1、Http服务端代码 public class HttpServer {public static void main(String[] args) {// 创建Reactor// 用来管理channel 监听事件 …

力扣HOT100 - 238. 除自身以外数组的乘积

解题思路&#xff1a; 当前位置的结果就是它左部分的乘积再乘以它右部分的乘积。因此需要进行两次遍历&#xff0c;第一次遍历用于求左部分的乘积&#xff0c;第二次遍历在求右部分的乘积的同时&#xff0c;再将最后的计算结果一起求出来。 class Solution {public int[] prod…

Vue3学习01 Vue3核心语法

Vue3学习 1. Vue3新的特性 2. 创建Vue3工程2.1 基于 vue-cli 创建项目文件说明 2.2 基于 vite 创建具体操作项目文件说明 2.3 简单案例(vite) 3. Vue3核心语法3.1 OptionsAPI 与 CompositionAPIOptions API 弊端Composition API 优势 ⭐3.2 setup小案例setup返回值setup 与 Opt…

【vue/uniapp】使用 smooth-signature 实现 h5 的横屏电子签名

通过github链接进行下载&#xff0c;然后代码参考如下&#xff0c;功能包含了清空、判断签名内容是否为空、生成png/jpg图片等。 签名效果&#xff1a; 预览效果&#xff1a; 下载 smooth-signature 链接&#xff1a;https://github.com/linjc/smooth-signature 代码参考&a…

nexus搭建maven与docker镜像的私有仓库

引言 通过nexus搭建maven与docker镜像的私有仓库,实现jar包与镜像动态更新、共享、存储。 一、nexus部署 通过docker-compose部署nexus name: java services:#############################环境#############################env-nexus:restart: always## 3.58.1image: so…

ANSYS 2024 R1 HFSS部分更新介绍(附下载)

1. 优化Layout component工作流 • 支持多区域 - 支持参数化弯曲定义的刚柔结合的PCB • Phi 网格可用 • 支持Mesh Fusion •简化创建复杂装配体的过程 2. 提升求解器速度 • 分布式矩阵汇编的内存使用率改进 ‐减少分布式矩阵求解器的RAM消耗 • 分布式稀疏直接求解器&am…

物联网实战--驱动篇之(六)4G通讯(Air780E)

目录 一、4G模块简介 二、AIR780E驱动程序 三、AIR780使用注意事项 四、结合MQTT传输测试 一、4G模块简介 4G应该是我们日常生活最常见的一种互联网通讯方式了&#xff0c;每个智能手机都配置了&#xff0c;不过手机的4G跟我们物联网领域要用的4G有点区别。首先是物联网采用…

芯来科技、IAR和MachineWare携手加速符合ASIL标准RISC-V汽车芯片创新

支持软件开发团队在虚拟硬件平台上进行固件和MCAL开发 芯来科技&#xff08;Nuclei&#xff09;、IAR和MachineWare紧密合作&#xff0c;加速RISC-V ASIL合规汽车解决方案的创新。此次合作简化了汽车电子的固件和MCAL开发&#xff0c;提供了虚拟和物理硬件平台之间的无缝集成。…

Harmony鸿蒙南向驱动开发-SDIO

SDIO&#xff08;Secure Digital Input and Output&#xff09;由SD卡发展而来&#xff0c;与SD卡统称为MMC&#xff08;MultiMediaCard&#xff09;&#xff0c;二者使用相同的通信协议。SDIO接口兼容以前的SD卡&#xff0c;并且可以连接支持SDIO接口的其他设备。 运作机制 …

SpringBoot --pagehelper分页

目录 1.建立数据库 2.页面显示 3.基本逻辑 4.配置依赖 5.使用pagehelper 6.页面列表 页面 效果 1.建立数据库 create database if not exists my_book; use my_book; create table if not exists myBook (id int primary key auto_increment,name varchar(50) not …

Node.js常用快捷键

1.常用的终端命令&#xff1a; &#xff08;1&#xff09;del 文件名&#xff1a; 删除文件 &#xff08;2&#xff09;ipconfig: 查看IP命令 &#xff08;3&#xff09;mkdir 目录名 &#xff1a;在当前目录新建指定目录 &#xff08;4&#xff09;rd 目录名&#xff1a;在当前…

【opencv】示例-ela.cpp JPEG图像的错误等级分析(ELA) 通过分析图像压缩后的差异来检测图像是否被篡改过...

ela_modified.jpg 原始ela_modified压缩后再解压得到compressed_img 差异图像Ela 这段代码的功能是实现JPEG图像的错误等级分析&#xff08;ELA&#xff09;&#xff0c;通过分析图像压缩后的差异来检测图像是否被篡改过。程序会首先读取一张图片&#xff0c;然后对其应用质量…

PHP自助建站系统,小白也能自己搭建网站

无需懂代码&#xff0c;用 自助建站 做企业官网就像做PPT一样简单&#xff0c;您可以亲自操刀做想要的效果&#xff01; 自助建站是一款简单、快捷、高效的工具&#xff0c;可以帮助您制作响应式网站。我们的自助建站系统&#xff0c;将传统的编码工作转化为直观的拖拽操作和文…