从0死磕全栈之Next.js 拦截路由（Intercepting Routes）详解：搭建模态框与上下文保持的利器
<style>pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; tab-size: 4 !important; -moz-tab-size: 4 !important; max-width: 100% !important; box-sizing: border-box !important }code { font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow-wrap: normal !important; display: inline !important; background: rgba(0, 0, 0, 0) !important; border: none !important; padding: 0 !important; margin: 0 !important; line-height: inherit !important }
pre code { background: rgba(0, 0, 0, 0) !important; border: 0 !important; border-radius: 0 !important; display: block !important; line-height: 1.6 !important; margin: 0 !important; max-width: none !important; overflow: visible !important; padding: 0 !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; color: inherit !important }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: rgba(112, 128, 144, 1) !important; font-style: italic !important }
.token.punctuation { color: rgba(153, 153, 153, 1) !important }
.token.atrule, .token.attr-value, .token.keyword { color: rgba(0, 119, 170, 1) !important; font-weight: bold !important }
.token.function, .token.class-name { color: rgba(221, 74, 104, 1) !important; font-weight: bold !important }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: rgba(102, 153, 0, 1) !important }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: rgba(153, 0, 85, 1) !important }
.cnblogs-markdown pre, .cnblogs-post-body pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; padding: 16px !important; margin: 16px 0 !important }
pre, pre, pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important }</style>
<div class="markdown_views prism-atom-one-dark" id="content_views"><svg style="display: none" xmlns="http://www.w3.org/2000/svg"><path d="M5,0 0,2.5 5,5z" id="raphael-marker-block" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)"></path></svg><p>在现代 Web 应用中，我们经常需要在不跳转页面的情况下展示某些内容，比如点击图片弹出一个模态框（Modal），但又希望这个模态框的内容可以利用 URL 分享、刷新后依然存在，甚至支持浏览器前进/后退操控。Next.js 13+ 的 App Router 提供了一个强大的功能 ——<strong>拦截路由（Intercepting Routes）</strong>，完美解决这类需求。</p><p>本文将深入浅出地介绍拦截路由的概念、使用场景，并提供可直接运行的代码示例。</p><hr><h3>一、什么是拦截路由（Intercepting Routes）？</h3><p>拦截路由允许你在<strong>当前布局中加载另一个路由的内容</strong>，而<strong>不真正跳转到那个路由</strong>。URL 会被“伪装”成目标路径，但页面结构仍保留在当前上下文中。</p><h4>核心特点：</h4><ul><li><strong>软导航（Soft Navigation）</strong>：点击链接时，内容以内联方式（如 Modal）展示，URL 变化但页面不刷新。</li><li><strong>硬导航（Hard Navigation）</strong>：直接访问 URL 或刷新页面时，渲染完整的目标页面。</li><li><strong>URL 可分享</strong>：Modal 中的内容拥有独立 URL，用户可直接分享。</li><li><strong>浏览器历史兼容</strong>：支持前进/后退管理，Modal 会自动打开或关闭。</li></ul><blockquote><p>✅ 举个例子：<br> 在 <code>/feed</code> 页面点击一张图片，URL 变为 <code>/photo/123</code>，但页面仍显示在 <code>/feed</code> 的上下文中（比如以 Modal 形式展示照片）。<br> 而如果你直接在浏览器输入 <code>/photo/123</code> 并回车，则会渲染完整的照片页面。</p></blockquote><hr> < </div><br><br>
来源：https://www.cnblogs.com/yxysuanfa/p/19157744
頁:
[1]