Next.js 有多种处理路由的方式。今天我想向你展示如何拦截路由。让我们从一个简单的例子开始。 ### 创建画廊页面首先，让我们创建一个包含图片列表的画廊页面。 ```tsx // app/gallery/page.tsx export default function Gallery() { const images = [ { id: "1", src: "https://placehold.co/300x150@2x.png?text=1", alt: "gallery image 1", width: 300, height: 150, }, { id: "2", src: "https://placehold.co/300x150@2x.png?text=2", alt: "gallery image 2", width: 300, height: 150, }, { id: "3", src: "https://placehold.co/300x150@2x.png?text=3", alt: "gallery image 3", width: 300, height: 150, }, ] return (

{images.map((image) => ( {image.alt}

))}

) } ``` 现在我们有了一个包含图片列表的画廊页面。 ![](https://askybig.github.io/ImageStore/nextjs-intercepting-routes/gallery.png) ### 添加动态路由当我们访问像 `/gallery/1` 这样的 URL 时，它会重定向到 `/gallery/1`。1 代表图片的 ID。 ```tsx // app/gallery/[imageId]/page.tsx import Image from "next/image" export default function ImagePage({ params }) { const { imageId } = params const getImageById = (id) => { const images = { 1: { id: "1", src: "https://placehold.co/300x150@2x.png?text=1", alt: "gallery image 1", width: 300, height: 150, }, 2: { id: "2", src: "https://placehold.co/300x150@2x.png?text=2", alt: "gallery image 2", width: 300, height: 150, }, 3: { id: "3", src: "https://placehold.co/300x150@2x.png?text=3", alt: "gallery image 3", width: 300, height: 150, }, } return images[id] } const image = getImageById(imageId) if (!image) { return

Image not found

} return (

Image {imageId}

) } ``` 然后我们为每张图片都有一个动态路由。我们可以直接访问 `/gallery/1` 来查看图片。 ![](https://askybig.github.io/ImageStore/nextjs-intercepting-routes/gallery1.png) ### 拦截路由正如你在[官方文档](https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes)中看到的： > 拦截路由允许你在当前布局内加载来自应用程序其他部分的路由。当你想要显示路由内容而不让用户切换到不同上下文时，这种路由范式很有用。这段话有点复杂，难以理解。让我们想象这样一个场景：我们有一个画廊页面，当我们点击图片时，我们想要显示图片。但我们不希望用户离开画廊页面。你知道在大多数情况下，当用户重定向到新页面时，他们可能不会再回来。 ```text (.) 匹配同一级别的段 (..) 匹配上一级的段 (..)(..) 匹配上两级的段 (...) 匹配根 app 目录的段 ``` 让我们使用第一个规则 `(.)` 来匹配同一级别的段。 ```tsx // app/(.gallery)/[imageId]/page.js "use client" import Image from "next/image" import { useRouter } from "next/navigation" import { useState, useEffect } from "react" import { use } from "react" export default function ImageModal({ params }) { const router = useRouter() const unwrappedParams = params instanceof Promise ? use(params) : params const imageId = unwrappedParams.imageId const [imageData, setImageData] = useState(null) const [error, setError] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { if (!imageId) return setLoading(true) try { const images = { 1: { src: "https://placehold.co/300x150@2x.png?text=1", alt: "gallery image 1", width: 300, height: 150, }, 2: { src: "https://placehold.co/300x150@2x.png?text=2", alt: "gallery image 2", width: 300, height: 150, }, 3: { src: "https://placehold.co/300x150@2x.png?text=3", alt: "gallery image 3", width: 300, height: 150, }, } const image = images[imageId] if (image) { setImageData(image) } else { setError(`Image with ID ${imageId} not found`) } } catch (err) { console.error("Error loading image:", err) setError("Error loading image data") } finally { setLoading(false) } }, [imageId]) useEffect(() => { const handleKeyDown = (e) => { if (e.key === "Escape") { closeModal() } } document.addEventListener("keydown", handleKeyDown) document.body.style.overflow = "hidden" return () => { document.removeEventListener("keydown", handleKeyDown) document.body.style.overflow = "auto" } }, []) const closeModal = () => { router.back() } const handleModalClick = (e) => { e.stopPropagation() } return (

{error ? (

{error}

) : loading ? (

Loading image...

) : ( imageData && ( {imageData.alt}

) )}

) } ``` 当我们点击图片时可以看到模态窗口，我们可以在浏览器中看到 URL 是 `/gallery/1`。然后我们可以将 URL 分享给其他人。