Next.js 13 模态路由实现：替代legacy属性as的方案

在Next.js 13的App Router中，as属性已被标记为遗留属性，不再生效。要实现原方案中URL掩码+模态路由的效果，可通过动态路由结合组件复用的方式实现，具体步骤如下：

1. 创建动态路由页面 #

新建app/[imageId]/page.js，该页面复用主页内容并根据动态路由参数渲染模态框：

// app/[imageId]/page.js
'use client';

import { useParams } from 'next/navigation';
import Home from '../page';
import Modal from '@/components/Modal';

export default function ImageDetailPage() {
  const params = useParams();
  const imageId = params.imageId;

  return (
    <>
      {/* 渲染主页原有内容 */}
      <Home />
      {/* 根据路由参数显示对应模态框 */}
      {imageId && <Modal imageId={imageId} />}
    </>
  );
}

2. 更新主页的链接跳转逻辑 #

将原有的带查询参数的链接，改为直接指向动态路由URL：

// app/page.js
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <div className="image-grid">
        {/* 直接跳转至动态路由 /1 */}
        <Link href="/1">
          <img src="/1.jpeg" alt="示例图片1" />
        </Link>
        {/* 更多图片链接 */}
        <Link href="/2">
          <img src="/2.jpeg" alt="示例图片2" />
        </Link>
      </div>
    </div>
  );
}

3. 实现模态框的关闭逻辑 #

在模态框组件中，通过路由跳转回到主页，移除动态路由参数：

// components/Modal.jsx
'use client';

import { useRouter } from 'next/navigation';

export default function Modal({ imageId }) {
  const router = useRouter();

  const handleClose = () => {
    // 关闭模态框时返回主页
    router.push('/');
  };

  return (
    <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50">
      <div className="bg-white p-4 rounded-lg">
        <img src={`/${imageId}.jpeg`} alt={`图片${imageId}`} className="max-h-[80vh]" />
        <button 
          onClick={handleClose}
          className="mt-4 px-4 py-2 bg-gray-200 rounded"
        >
          关闭
        </button>
      </div>
    </div>
  );
}

关键说明 #

• 动态路由[imageId]直接映射友好URL（如/1），替代原as属性的URL掩码效果；
• 动态路由页面复用主页组件，确保页面基础内容与主页一致；
• 客户端组件中使用useParams获取路由参数，控制模态框的显示；
• 关闭模态框时通过router.push('/')回退到主页，保持路由状态一致。

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