前言
本文章是根据Next14官网对于路由做的一个小结，可以帮助准备学习Next14的小伙伴做一个参考。NextJs路由分为page路由和app路由现在官方推荐的是使用app路由，所以本文以app路由来做讲解。
路由
NextJs的路由是以在src下面的app创建文件夹来决定路由层次或者路由访问路径的。然后文件夹里面放一个page.tsx文件就是当前页面的访问入口文件。例如下面的访问路径就是/login。
路由分组
我们发现layout这个文件夹为什么用（）来包住的。这是用来给路由分组的,并且这样不会被影响(layout)文件夹下的访问路径,如果你访问 orderlist 也只需要 /orderlist 。
例如:他可以帮助你创建多个Layout布局(在同一文件下创建Layou组件会自动将当前的page作为children传到当前的layout组件)。
动态路由
那么**[id]文件夹又是什么作用。这就是一个动态路由，首先（layout）文件夹是被忽略的，所以要访问[id]这个页面就是http://localhost:3000/123**
就可以直接访问这个页面，并且在page.tsx会有一个params参数可以获取后面的查询参数。
// src/app/[id]/page.tsx
export default function Page({ params }: { params: { id: string } }) {
return <div>My Post: {params.id}</div> // params.id = 123
}
这种动态路由创建的页面也被称为Dynamic Rendering(动态渲染)。
当我们想在路由上显示当前语言的时候就可以使用这种方式完成路由的拼接非常的方便（**http://localhost:3000/zh/xxx**）。
动态路由也可以使用[...id]这样可以捕获到你进入这个页面的所有查询参数。
例如你将上面改为[...id]，之后访问**http://localhost:3000/a/b**你就可以捕捉到
**{id:["a","b"]****}**变为了数组。
有兄弟会问如果我不想在上面a/b的时候获取参数怎么办，那么就是在[id]下面继续套娃创建b文件夹然后在b文件夹里面创建page.tsx那么a/b这个路由就是一个独立新的路由的。
结语
这里的内容都是在NextJs官方文档里然后做了个小结与大家分享,如果有不足的欢迎大家提出。
