从0死磕全栈之Next.js 拦截路由（Intercepting Routes）详解：搭建模态框与上下文保持的利器

高鹏济南龙门刨

在现代 Web 应用中，我们经常需要在不跳转页面的情况下展示某些内容，比如点击图片弹出一个模态框（Modal），但又希望这个模态框的内容可以利用 URL 分享、刷新后依然存在，甚至支持浏览器前进/后退操控。Next.js 13+ 的 App Router 提供了一个强大的功能 ——拦截路由（Intercepting Routes），完美解决这类需求。

本文将深入浅出地介绍拦截路由的概念、使用场景，并提供可直接运行的代码示例。

---

一、什么是拦截路由（Intercepting Routes）？

拦截路由允许你在当前布局中加载另一个路由的内容，而不真正跳转到那个路由。URL 会被“伪装”成目标路径，但页面结构仍保留在当前上下文中。

核心特点：

• 软导航（Soft Navigation）：点击链接时，内容以内联方式（如 Modal）展示，URL 变化但页面不刷新。
• 硬导航（Hard Navigation）：直接访问 URL 或刷新页面时，渲染完整的目标页面。
• URL 可分享：Modal 中的内容拥有独立 URL，用户可直接分享。
• 浏览器历史兼容：支持前进/后退管理，Modal 会自动打开或关闭。

✅ 举个例子：
在 /feed 页面点击一张图片，URL 变为 /photo/123，但页面仍显示在 /feed 的上下文中（比如以 Modal 形式展示照片）。
而如果你直接在浏览器输入 /photo/123 并回车，则会渲染完整的照片页面。

---

<

来源：https://www.cnblogs.com/yxysuanfa/p/19157744