Next.js Link组件（as属性）无法按预期实现模态路由

核心问题 #

你混淆了Next.js Pages Router和App Router的API：App Router中的Link组件已经移除了as属性，所以你之前依赖as伪装URL的写法完全不适用，这也是href被忽略、模态框不触发的根本原因。

正确实现方案（URL友好的模态路由） #

要实现点击后URL显示/explore/[id]且在原页面打开模态框，需要用App Router的**拦截路由（Intercepting Routes）**特性，步骤如下：

1. 调整路由结构
   在app目录下创建拦截路由分组，让模态路由可以嵌入原explore页面：

   app/
     explore/
       page.js                # 原探索页面
       (modal)/               # 路由分组，不影响URL路径
         [recipeId]/
           page.js            # 模态框内容组件
   

2. 修改Link组件写法
   直接指向动态路由地址，无需任何伪装：

   <Link href={`/explore/${id}`}>点击查看食谱</Link>
   

3. 编写模态框路由组件
   在app/explore/(modal)/[recipeId]/page.js中实现模态框内容，利用路由API控制关闭：

   'use client';
   import { useRouter } from 'next/navigation';
   import Modal from '@/components/Modal'; // 替换为你的模态框组件路径
   import Recipe from '@/components/Recipe';
   
   export default function RecipeModal({ params }) {
     const router = useRouter();
     const { recipeId } = params;
   
     return (
       <Modal visible={true} onClose={() => router.back()}>
         <Recipe id={recipeId} />
       </Modal>
     );
   }
   

4. （可选）自定义模态框插入位置
   默认拦截路由的模态框会渲染在body末尾，若想嵌入explore页面指定位置，可使用插槽（Slots）：

   • 在app/explore/page.js中添加插槽出口：

     'use client';
     import { Outlet } from 'next/navigation';
     
     export default function ExplorePage() {
       return (
         <div className="explore-page">
           {/* 原页面所有内容 */}
           <Outlet slot="modal" />
         </div>
       );
     }
     

   • 在app/explore/(modal)/[recipeId]/page.js顶部声明插槽：

     export const slot = 'modal';
     
     // 其余模态框组件代码不变
     

备选方案（查询参数方式） #

如果暂时不想调整路由结构，也可以直接用查询参数控制模态框，无需as属性：

1. 修改Link：

   <Link href={`/explore?recipeId=${id}`}>点击查看食谱</Link>
   

2. 在app/explore/page.js中通过searchParams获取参数：

   export default function ExplorePage({ searchParams }) {
     const recipeId = searchParams?.recipeId;
     return (
       <>
         {/* 原页面内容 */}
         <Modal visible={!!recipeId}>
           <Recipe id={recipeId} />
         </Modal>
       </>
     );
   }
   

   缺点是URL会显示为/explore?recipeId=xxx，不如动态路由美观。

内容的提问来源于stack exchange，提问作者Song Lim