Next.js 并行路由与拦截路由实现弹窗遇到问题

兄弟，我太懂你这种想把路由跳转和模态框结合，结果卡在Next.js的并行/拦截路由上的憋屈了！结合你提到的events文件夹结构，我给你一步步捋清楚怎么实现点击事件卡片弹出模态框的效果：

首先得搞明白核心逻辑：拦截路由是用来“劫持”特定路由的访问，并行路由则是在同一个页面里渲染多个路由槽位，俩结合就能实现点击跳转不刷新页面，同时弹出模态框的效果。

第一步：调整文件结构 #

你现在的events目录应该是有page.tsx（事件列表页）和[eventId]文件夹（事件详情页）对吧？现在要改成这样的结构：

• app/
  • events/
    • page.tsx
    • @modal/ // 自定义的并行路由槽位，名字可以换成你喜欢的，比如@eventModal
      • (.)[eventId]/ // 这里的(.)是拦截路由前缀，用来劫持当前层级下的[eventId]路由
        • page.tsx
    • [eventId]/
      • page.tsx

第二步：修改列表页的链接 #

你之前给卡片加的Link组件是跳转到/events/${eventId}，现在要改成指向并行路由槽位的地址，这样点击后才会把详情内容渲染到模态框槽位里，而不是替换整个页面。

比如原来的代码是：

<Link href={`/events/${eventId}`}>查看详情</Link>

现在要改成：

<Link href={`/events/@modal/${eventId}`}>查看详情</Link>

第三步：在列表页渲染并行槽位 #

你需要在events/page.tsx里加入并行槽位的出口，这样点击链接时，模态框内容才会渲染到这里。同时要处理模态框的关闭逻辑，比如点击遮罩或关闭按钮时，用路由方法移除槽位的路由。

举个实际代码例子：

'use client'
import { useRouter } from 'next/navigation'
import { Suspense } from 'react'

export default function EventsPage({ modal }: { modal: React.ReactNode }) {
  const router = useRouter()

  // 没有模态框内容时，只渲染事件列表
  if (!modal) {
    return <div>{/* 这里放你的事件卡片列表代码 */}</div>
  }

  // 有模态框内容时，渲染列表+模态框
  return (
    <div>
      {/* 事件卡片列表 */}
      <div>{/* 你的列表内容 */}</div>
      {/* 模态框遮罩，点击关闭 */}
      <div onClick={() => router.back()} className="fixed inset-0 bg-black/50 z-50" />
      {/* 模态框内容，用Suspense处理加载状态 */}
      <Suspense fallback={<div>加载中...</div>}>
        <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 bg-white p-6 rounded-lg w-4/5 max-w-lg">
          {modal}
          <button onClick={() => router.back()} className="mt-4 px-4 py-2 bg-gray-200 rounded">关闭</button>
        </div>
      </Suspense>
    </div>
  )
}

这里的modal参数是Next.js自动传给并行路由槽位的，直接接收就行。

第四步：区分两种详情页状态 #

在app/events/@modal/(.)[eventId]/page.tsx里，只需要渲染模态框里的详情内容（不用套外层布局）；原来的app/events/[eventId]/page.tsx保持不变，这样用户直接访问/events/[eventId]时，还是会显示正常的详情页面，不会弹出模态框。

给你提几个容易踩的坑 #

• 拦截路由的前缀别写错：(.)是拦截当前路由层级的路由，你在events内部实现，用(.)就对了
• 并行路由的槽位名字要统一：比如你定义的是@modal，那链接和页面接收的参数都要对应上
• 模态框的交互逻辑必须写在'use client'组件里，因为涉及到客户端路由和状态
• 一定要用Suspense包裹模态框内容，不然路由切换时可能会有加载闪烁的问题

按照这个步骤改完，点击事件卡片时，就能在列表页上弹出模态框，地址栏会变成/events/@modal/[eventId]，刷新页面也能正常显示模态框，直接访问/events/[eventId]还是正常的详情页，完美实现需求！

内容来源于stack exchange