Next.js 14 中的拦截路由功能

假设您有一个信息流页面（/feed），并且想在点击图片时通过模态框显示图片详情（/photo/123），同时保持在信息流页面上下文中。在这个场景中，模态框的内容可以通过拦截路由来控制，而不是将用户完全导航到一个新的页面。这里是一个基本的代码框架：

// pages/feed.js
import Link from 'next/link';
import Modal from '../components/Modal';

export default function Feed() {
  // 假设 state 控制模态框是否显示
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      {/* 信息流内容 */}
      <div>
        {photos.map((photo) => (
          <Link href={`/feed/(photo)/${photo.id}`} key={photo.id}>
            <a onClick={() => setShowModal(true)}>显示图片</a>
          </Link>
        ))}
      </div>

      {/* 模态框 */}
      {showModal && (
        <Modal onClose={() => setShowModal(false)}>
          {/* 模态框内容 */}
        </Modal>
      )}
    </div>
  );
}

在这个例子中，当用户点击链接时，URL会变成类似于/feed/(photo)/123的形式。这个URL同时激活了feed路由和模态框。用户可以通过浏览器的前进和后退按钮来打开或关闭模态框，而不是导航到一个全新的页面。