跳到主要内容

next路由

  • Next.js提供了一套内置的文件路由系统，文件的命名与路由的生成有着直接的对应关系

定义路由​

next通过文件夹定义路由

  • 如test.com/dashboard/settings 对应文件路径为 app/dashboard/settings/page.js -page.js文件是路由页面的访问，可以公开访问

根布局​

app目录下的page.tsx文件会自动映射为页面的路由，例如，app/page.tsx会被解析为根路由/

嵌套布局​

在app目录的各个子文件夹下创建layout.tsx文件。这些子文件夹下的layout.tsx文件将作为该路由下的共享UI组件，仅在该子文件夹下的页面之间共享

动态路由​

在Next.js中，要实现动态路由，你需要在pages目录的相应位置使用方括号来创建特殊的文件夹名称，例如[id]或[name]。动态字段将作为参数传递给layout、page、route和generateMetadata函数

[folderName]​

动态路由的基本用法，新建src/app/blog/[id]/page.tsx

  • 访问路由“/blog/2024”，页面将呈现“2024博客页面”
js
const Blog = ({ params }: { params: { id: string } }) => {
    return <div>{params.id}博客页面</div>;
  };
  
  export default Blog;

[...folderName]​

如果访问路由“/blog/2024/1”，则页面会显示404。可在方括号内添加省略号[...folderName]，捕获后面所有的路由片段

js
const Blog = ({ params }: { params: { year: string[] } }) => {
    return (
      <div>
        {params.year.map((o, index) => (
          <div key={index}>{o}</div>
        ))}
      </div>
    );
  };
  
  export default Blog;

[[...folderName]]​

blog/[...year]能捕获/blog/a，也能捕获/blog/a/b，但不能捕获/blog，访问/blog将会得到404页面。可通过在双方括号内添加省略号的形式，捕获包括自身的路由段。

路由组​

路由组是为了在项目比较大时，更好的管理路由文件的一种方式。使用中括号来创建特殊的文件夹名称，例如(marketing)或(shop)。

  • 路由组不会影响url结构，例如app/(marketing)/about/page.js对应的路由为/about

平行路由​

平行路由可以使你在同一个布局中同时或者有条件的渲染一个或者多个页面( 类似于 Vue 的插槽功能 )

  • 一般应用于应用的动态布局的部分, 如在一个布局页面中,同时呈现多个路由的页面
  • 平行路由的使用方式就是将文件夹以 @作为开头进行命名

拦截路由​

拦截路由允许你在当前布局内加载应用其他部分的路由

  • 在当前布局内加载其他部分的路由, 如果不希望用户点击该部分路由进行跳转到具体路由页面,可以进行拦截路由,屏蔽URL, 将这个路由页面覆盖在布局上

api路由​

Next.js 的 API 路由系统提供了完整的后端开发能力

Next.js中 API 路由的实现原理与页面路由类似，但它专门用于处理 API 请求

  • 通过api文件夹来定义api路由

API 的文件命名有三种方式：

  • app/api/dashboard/route.js
  • app/api/dashboard/[param]/route.js
  • app/api/dashboard/[...param]/route.js

例子：

  • 基础api路由：app/api/user/list.ts

    • api路由接口 => api/user/list

  • 动态路由：在app/api/post/[param].js

    • api路由接口 => /api/post/xxx

路由传参​