【Next】拦截路由_next中拦截路由-CSDN博客

本文链接：https://blog.csdn.net/xiugonghao/article/details/143887519

拦截路由

对于一个路由以不同的方式（Link 软导航的方式和浏览器刷新页面的方式）去访问，得到的页面渲染结果也会不同。

比如，一个是自己访问某个图片列表中的图片（Link 软导航的方式），另一个是分享给其他人该网址后访问到的图片（浏览器刷新页面的方式）：

在这里插入图片描述

可以使用（…）约定定义拦截路由（Link）。

在这里插入图片描述

上述这个目录中，直接 Link 访问的是 photo[id]\page.js ，而直接网址访问的是 (…)photo[id]\page.tsx 。

目录说明：

（.）匹配同一级别的区段
（..）匹配上一级的区段
（..）（..）匹配上两级的区段
（...）匹配根app 目录中的区段

示例说明

layout.tsx

export default function RootLayout({children, modal}: Readonly<{
    children: React.ReactNode;
    modal: React.ReactNode;
}>) {

    return (
        <html className={notoSansRejang.className}>
        <body>
        <AntdRegistry>
            {children}
            {modal}
        </AntdRegistry>
        </body>
        </html>
    );
}

default.tsx

function Page(props) {
    return null;
}

export default Page;

page.tsx

import '../styles/globals.css'
import '@/styles/main.scss'
import {photos} from "@/app/data";
import Image from "next/image";
import Link from "next/link";

export default function Home() {

    return (
        <>
            <div className="bg-white">
                <div className="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
                    <h2 className="sr-only">Products</h2>

                    <div
                        className="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
                        {photos.map(item => <Link href={`/images/${item.id}`} className="group" key={item.id}>
                            <Image
                                src={item.src}
                                alt={item.alt}
                                width={200}
                                height={200}
                                className="aspect-square w-full rounded-lg bg-gray-200 object-cover group-hover:opacity-75 xl:aspect-[7/8]"/>
                            <h3 className="mt-4 text-sm text-gray-700 line-clamp-1">{item.alt}</h3>
                            <p className="mt-1 text-lg font-medium text-gray-900">${item.price}</p>
                        </Link>)}
                    </div>
                </div>
            </div>

        </>
    )
}

在这里插入图片描述
@modal(.)images[id]\page.tsx

"use client"
import {photos} from "@/app/data";
import Image from "next/image";
// 这里是导入的 "next/navigation" 而不是 "next/router"
import {useRouter} from "next/navigation";

export default function Page({params}: { params: { id: string } }) {
    const photo = photos.find(item => item.id === +params.id)!
    const router = useRouter()
    return (
        <div className={"flex justify-center items-center fixed inset-0 bg-gray-500/[.8]"} onClick={router.back}>
            <Image src={photo.src} alt={photo.alt} width={400} height={400}
                   className={"rounded-lg"} onClick={e => e.stopPropagation()}></Image>
        </div>
    )
}

default.tsx 和上述一样。

imges[id]\page.tsx

import {photos} from "@/app/data";
import Image from "next/image";

export default function Page({params}: { params: { id: string } }) {
    const photo = photos.find(item => item.id === +params.id)!
    return (
        <div className={"container mx-auto pt-8"}>
            <Image src={photo.src} alt={photo.alt} width={400} height={400}
                   className={"rounded-lg block mx-auto"}></Image>
            <div className={"border-2 border-dashed border-grey-500 rounded-lg p-3 mt-6 leading-8"}>
                <p>
                    <strong>Title:</strong> {photo.alt}
                </p>
                <p>
                    <strong>Price:</strong> {photo.price}
                </p>
                <p>
                    <strong>Desc:</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ea incidunt
                    molestiae nisi quidem quod repellendus repudiandae sit ut vel! Consequuntur esse fugit ipsa nesciunt
                    odio quia quibusdam quo voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Beatae debitis delectus dolor hic itaque molestiae molestias obcaecati placeat quos vitae! Ea
                    excepturi facilis itaque modi numquam quasi sint tenetur totam!lorem ipsum lorem ipsum
                </p>
            </div>
        </div>
    )
}

data.ts

export const photos = [
    {
        id: 1,
        src: "https://tailwindui.com/plus/img/ecommerce-images/category-page-04-image-card-01.jpg",
        alt: "photo 1",
        price: 100,
    },
    {
        id: 2,
        src: "https://tailwindui.com/plus/img/ecommerce-images/category-page-04-image-card-02.jpg",
        alt: "photo 2",
        price: 200,
    },
    {
        id: 3,
        src: "https://tailwindui.com/plus/img/ecommerce-images/category-page-04-image-card-03.jpg",
        alt: "photo 3",
        price: 300,
    },
    {
        id: 4,
        src: "https://tailwindui.com/plus/img/ecommerce-images/category-page-04-image-card-04.jpg",
        alt: "photo 4",
        price: 400,
    },
    {
        id: 5,
        src: "https://tailwindui.com/plus/img/ecommerce-images/category-page-04-image-card-05.jpg",
        alt: "photo 5",
        price: 500,
    },
    {
        id: 6,
        src: "https://tailwindui.com/plus/img/ecommerce-images/category-page-04-image-card-06.jpg",
        alt: "photo 6",
        price: 600,
    },
    {
        id: 7,
        src: "https://tailwindui.com/plus/img/ecommerce-images/category-page-04-image-card-07.jpg",
        alt: "photo 7",
        price: 700,
    },
    {
        id: 8,
        src: "https://tailwindui.com/plus/img/ecommerce-images/category-page-04-image-card-08.jpg",
        alt: "photo 8",
        price: 800,
    }
]