当前位置: 首页 > article >正文

Nextjs14记录

创建 nextapp

pnpx create-next-app  xxxx

路由

文件式生成路由

自动识别在src/app目录下
创建的page.tsx 文件

动态路由

src/
└── app/
    └── product/
        └── [productId]/
            └── page.tsx

其中page中的函数 {params}  为固定识别的参数可以获取路由传过来的值

嵌套动态路由
src/
└── app/
    └── product/
        └── [productId]/
            └── reviews/
                └── [reviewsId]/
                    └── page.tsx
            └── page.tsx
多层嵌套 可以获取所有层级动态路由的值

捕获所有路由(Catch-All 路由)

src/
└── app/
        └── products/
            └── [...slug].js
访问 /products/a、/products/a/b、/products/a/b/c 等路径都会匹配到 [...slug],并且这些路径的具体参数可以通过 slug 变量在组件中获取:

私有路由

src/
└── app/
    └── _lib/
        └── page.tsx
不会将在以_或%5(_转义字符)起始的文件夹的文件识别为路由

页面不可见

404 页面

在根目录创建
not-found.tsx
单独为某页面设置 404
与文件夹page.tsx同级创建not-found.tsx
pages/
└── product/
    └── [productId]/
        └── reviews/
            └── [reviewsId]/
                └── page.tsx
                └── not-found.tsx
        └── page.tsx

http://www.kler.cn/a/384299.html

相关文章:

  • 【数学二】线性代数-向量-向量组的秩、矩阵得秩
  • pnpm管理多工作区依赖
  • TensorFlow|咖啡豆识别
  • 【自学笔记】神经网络(1)
  • 123456
  • MySQL表转移数据的三种方式
  • 文件系统和日志管理 附实验:远程访问第一台虚拟机日志
  • Java:网络原理-TCP/IP
  • TARE-PLANNER学习记录
  • Chat GPT英文学术写作指令
  • HTML第二次作业
  • 力姆泰克电动缸助力农业机械装备,提高农机的自动化水平
  • ubuntu 22.04 硬件配置 查看 显卡
  • 轻型民用无人驾驶航空器安全操控------理论考试多旋翼部分笔记
  • 【C/C++】strncpy函数的模拟实现
  • 科技查新在人工智能领域的重要性
  • php扩展安装
  • Zookeeper 简介 | 特点 | 数据存储
  • spring boot 难点解析及使用spring boot时的注意事项
  • 原生鸿蒙应用市场开发者服务的技术解析:从集成到应用发布的完整体验
  • 2024 开源社年度评选
  • sql server 文件备份恢复
  • 论文速读:简化目标检测的无源域适应-有效的自我训练策略和性能洞察(ECCV2024)
  • 浏览器内置对象XMLHttpRequest
  • 写了个建表语句 review 的 prompt
  • MySQL 9从入门到性能优化-加密函数