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]的页面
相关推荐
堂铭6 天前
NextJS多语言
前端·i18n·nextjs
Mebius19162 个月前
开源全站第一个Nextron(NextJS+electron)项目--NextTalk:一款集成chatgpt的实时聊天工具
前端·react.js·typescript·开源·github·tailwindcss·nextjs
tangfuling19913 个月前
用 nextjs 创建 Node+React Demo
前端框架·react·nextjs
A洛3 个月前
Cloudflare Pages 部署 Next.js 应用教程
开发语言·github·nextjs·cloudflare·cloudflarepages
Zong_09154 个月前
NextJs - 服务端/客户端组件之架构多样性设计
nextjs
hawk2014bj4 个月前
NextJS 使用 Docker 发布
docker·nextjs
hawk2014bj4 个月前
NextJS 服务器端代码调试
react·nextjs·ssr
loong_XL5 个月前
nextjs 实现TodoList网页应用案例
开发语言·前端·javascript·nextjs
Zong_09156 个月前
NextJs 系列文章
nextjs
Ygria_6 个月前
详解Next Auth:自定义邮箱密码登录注册、Github、Notion授权 & Convex集成
github·nextjs·notion