next-route

在目录结构中,我们精心创建的每一个文件最终都会经过处理,转化为相应的页面路由。然而,值得注意的是,某些特殊文件格式在生成过程中并不会被当作路由路径来处理。

复制代码
app
 |-auth
     login
       page.tsx
     password
       page.tsx
//最后生成的路由路径
//·localhost:3000/auth/login 
//·localhost:3000/auth/password
       
       
//()路由组的作用在编译的时候会忽略       
app
  (auth)
      login
          page.tsx
      password
          page.tsx   
//最后生成的路由路径 
//·localhost:3000/login 
//·localhost:3000/password

//[]的作用 动态路由
app
  auth
      [dynamic]
          page.tsx
//最后生成的路由路径 
//·localhost:3000/auth/1 
//·localhost:3000/auth/2  
//因为他在 auth 文件下 所有在路径匹配 auth时,他的下一级都回访问到 [dynamic]的页面





//[...]的作用 多级动态路由
app
  auth
      [...slug]
          page.tsx
//最后生成的路由路径 
//·localhost:3000/auth/1 
//·localhost:3000/auth/1/docs  
//·localhost:3000/auth/1/docs/1
//因为他在 auth 文件下 所有在路径匹配 auth时,他的后续路由都回访问到 [...slug]的页面
相关推荐
桂云网络OSG13 小时前
破局企业数字化转型:桂云网络发布“桂花”数字化底座,重新定义企业级阅签与安全边界
数字化·nextjs·antd·数字化底座
小牛itbull4 天前
告别传统主题开发!ReactPress Theme Starter —— 用 Next.js 15 构建现代化无头博客
javascript·cms·react·wordpress·nextjs·reactpress·blog-theme
任磊abc7 天前
nextjs16配置eslint+prettier
前端·eslint·nextjs·prettier
任磊abc8 天前
nextjs配置端口以及不同的环境变量
react·nextjs·配置开发端口·打开默认浏览器
jingling55510 天前
自建技术博客实战(三):工具专栏——地图定位、声音复刻与 rembg 抠图
android·开发语言·前端·ai·nextjs
低代码布道师1 个月前
赋予数据形态:从 API 到 UI,构建状态驱动的后台页面
ui·nextjs
低代码布道师1 个月前
注入灵魂:从架构设计到数据能力的“降维打击”
nextjs
胡志辉的博客2 个月前
本地明明好好的,怎么一上线就跨域了?把同源策略、前后端分工和 CORS 一次讲明白
前端·javascript·vue.js·reactjs·nextjs·跨域
康一夏2 个月前
Next.js 13变化有多大?
前端·react·nextjs
低代码布道师2 个月前
纯代码实战:MBA培训管理系统 (十六) ——岗位管理(新增、编辑、删除)
nextjs