当前位置：首页 > news >正文

Next.js系统性教学：拦截路由与路由处理器

news 2025/7/29 18:46:54

1. 路由拦截 (Intercepting Routes)

1.1 什么是路由拦截？

路由拦截允许开发者在导航到特定路由时加载额外的用户界面，同时保留当前的上下文。例如：

弹出模态框预览新页面的内容。
在不离开主页面的情况下展示嵌套信息。

这一功能通常用于增强用户体验，避免频繁的页面跳转。

1.2 配置拦截路由

在 Next.js 中，使用 (..) 文件夹定义拦截路由。这个文件夹的路径会被解释为需要拦截的目标页面。

目录结构：

app/
├── dashboard/
│   ├── page.js
│   ├── (..)modal/
│   │   ├── page.js

当用户从 dashboard 页面导航到某个路径时，(..) 中的内容会以嵌套形式呈现，而不影响当前页面上下文。

1.3 示例：模态框预览

主页面：app/dashboard/page.js

export default function Dashboard() {return (<main><h1>仪表盘</h1><a href="/dashboard/(..)/modal">打开模态框</a></main>);
}

模态框页面：app/dashboard/(..)/modal/page.js

export default function Modal() {return (<div style={{ background: 'rgba(0, 0, 0, 0.8)', padding: '20px' }}><h2>模态框内容</h2><a href="/dashboard">关闭</a></div>);
}

运行效果：

当用户点击 “打开模态框” 时，modal 页面会以模态框的形式覆盖在 dashboard 页面上。
(..) 确保页面导航保持平滑，无需完全重新加载主页面。

1.4 使用场景

内容预览：例如博客文章摘要或商品详情。
弹窗形式的表单：如登录或评论表单。
分步流程：用户在浏览过程中临时查看其他页面信息。

2. 路由处理器 (Route Handlers)

2.1 什么是路由处理器？

路由处理器允许开发者直接在路由中处理 HTTP 请求，而不需要通过 API 路径。这种机制非常适合需要动态响应内容或处理特定请求的场景，例如：

根据参数动态生成文件。
在页面中嵌入微型 API。

2.2 配置路由处理器

在 app 目录下，路由处理器通过 route.js 或 route.ts 文件实现。处理器文件与页面文件共存，但专注于处理网络请求。

目录结构：

app/
├── api/
│   ├── hello/
│   │   ├── route.js

以上配置会创建一个 API 路径 /api/hello，可以直接接收和响应 HTTP 请求。

2.3 示例：简单的 GET 和 POST 处理

GET 请求：

export async function GET(request) {return new Response(JSON.stringify({ message: "Hello, Next.js!" }), {headers: { "Content-Type": "application/json" },});
}

访问 /api/hello 将返回 JSON 响应：{ "message": "Hello, Next.js!" }。

POST 请求：

export async function POST(request) {const data = await request.json();return new Response(JSON.stringify({ message: `You sent: ${data.text}` }),{headers: { "Content-Type": "application/json" },});
}

通过 POST 请求发送 { "text": "Hello" }，会收到响应：{ "message": "You sent: Hello" }。

2.4 路由处理器中的动态参数

路由处理器也支持动态参数，与动态页面的实现类似。

目录结构：

app/
├── api/
│   ├── [id]/
│   │   ├── route.js

示例代码：app/api/[id]/route.js

export async function GET(request, { params }) {const { id } = params;return new Response(JSON.stringify({ id }), {headers: { "Content-Type": "application/json" },});
}

访问 /api/123 将返回 { "id": "123" }。

2.5 高级用法：流式响应

Next.js 路由处理器支持流式响应，适合用来发送大型数据或实时更新。

export async function GET() {const encoder = new TextEncoder();const stream = new ReadableStream({start(controller) {controller.enqueue(encoder.encode("开始流式传输...\n"));setTimeout(() => controller.enqueue(encoder.encode("继续传输...\n")), 1000);setTimeout(() => controller.close(), 2000);},});return new Response(stream, {headers: { "Content-Type": "text/plain" },});
}

访问路径时，浏览器将逐步接收数据流。

2.6 使用场景

动态内容生成：如生成 PDF、CSV 文件。
嵌入式 API：在页面中直接提供与特定页面相关的 API。
实时更新：通过流式传输为客户端提供实时数据。

3. 路由拦截与路由处理器的结合

两者可以结合使用，进一步增强页面的动态性和交互性。

示例：

使用路由拦截加载模态框。
通过路由处理器提供模态框需要的数据。

目录结构：

app/
├── dashboard/
│   ├── page.js
│   ├── (..)modal/
│   │   ├── page.js
│   ├── (..)modal/
│   │   ├── route.js

modal/page.js：

export default function Modal({ data }) {return (<div><h1>模态框内容</h1><p>{data.message}</p></div>);
}

modal/route.js：

export async function GET() {return new Response(JSON.stringify({ message: "这是动态加载的模态框数据" }), {headers: { "Content-Type": "application/json" },});
}

4. 总结

路由拦截 提供了一种优雅的方式展示弹窗和嵌套内容，提升用户体验。
路由处理器 是灵活处理 HTTP 请求的工具，适用于动态内容生成和实时响应。
结合使用这两种特性，可以显著提升应用的动态性、交互性和性能。

通过掌握这些高级路由技巧，开发者可以用 Next.js 打造功能更丰富、用户体验更出色的应用。

Next.js系统性教学：拦截路由与路由处理器

更多有关Next.js教程，请查阅：

1. 路由拦截 (Intercepting Routes)

1.1 什么是路由拦截？

1.2 配置拦截路由

1.3 示例：模态框预览

1.4 使用场景

2. 路由处理器 (Route Handlers)

2.1 什么是路由处理器？

2.2 配置路由处理器

2.3 示例：简单的 GET 和 POST 处理

2.4 路由处理器中的动态参数

2.5 高级用法：流式响应

2.6 使用场景

3. 路由拦截与路由处理器的结合

4. 总结

更多有关Next.js教程，请查阅：

相关文章：