不要把事情复杂化，你已经在petCard组件中传递了pet.id，只是从那里链接它。

import React from 'react';
import Image from 'next/image';
import Button from '../components/Button';
import Link from 'next/link';

export default function PetCard({ pet, onClick }) {

 return (
  <div className="flex flex-col border p-4 rounded-lg hover:shadow-lg 
    transition-shadow bg-white" >
  <Link href={`/adote/${pet.id}`}>
    <Button
      label="Ver perfil"
      className="bg-indigo-500 hover:bg-gray-600 focus-visible:outline- 
       indigo-600 w-32 flex flex-row justify-center items-center"
    />
  </Link>
  </div>
  )
 }

字符串
然后通过参数在PetDetailPage中搜索pet的具体id

'use server'
import React from 'react';

export default function PetDetailPage({ params }) {
const pet = getPetDetails(params.id)

return (
 <div className="p-4">
  <Image src={pet.avatar} alt={pet.name} width={600} height={600} 
    className="rounded-md" />
  <h1 className="text-2xl font-bold mt-4">{pet.name}</h1>
  <p className="text-gray-600">{pet.breed}</p>
  <p className="text-gray-600">{pet.id}</p>
  <p className="text-gray-600">{pet.age}</p>
  <p className="text-gray-600">{pet.gender}</p>
  <p className="mt-2">{pet.description}</p>
 </div>
 );
}

型

下面是我做的一个示例代码：解释：

• 有一个显示所有宠物名称的宠物页面，
• 它包含两个元素1st is Link tag和2nd is a Button as link
• 看一下文件夹结构，重点在pets folder上
• 在宠物页面上，我已经显示了宠物数据（你可以使用你的卡组件显示它），使用你的代码中的URL。
  文件夹结构：

projectName
├── .gitignore
├── jsconfig.json
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   ├── images
│   ├── next.svg
│   └── vercel.svg
├── README.md
├── src
│   └── app
│       ├── api
│       ├── comp
│       │   ├── LinkButton.js
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.js
│       ├── page.js
│       ├── pets
│       │   ├── page.js
│       │   └── [id]
│       │       └── page.js
└── tailwind.config.js

字符串

• 现在我将显示宠物数据，并从它我将通过ID链接标签和按钮组件。
• 按钮组件是事件点击的客户端组件。
• 现在，如果有人点击链接或按钮，他们将被导航到pets/id
• 使用代码中存在的URL，我将ID附加到它，通过ID获取宠物的详细信息。详细信息页面位于文件夹pets/[id]/page.js下
  您可以阅读本文以获得更清晰的概念：
• 路由基础：https://nextjs.org/docs/app/building-your-application/routing
• 动态路线：

https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes的

• 链接和导航：

https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating的

• 服务器组件：

https://nextjs.org/docs/app/building-your-application/rendering/server-components的

• 客户端组件：

https://nextjs.org/docs/app/building-your-application/rendering/client-components的

• 何时使用服务器和客户端组件？：

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#when-to-use-server-and-client-components

所有宠物详情页：projectName\src\app\pets\page.js

import Link from "next/link"
import LinkButton from "../comp/LinkButton"

async function GetPets() {
    let data = await fetch('https://653bf08fd5d6790f5ec7a989.mockapi.io/pets')
    let PetsData = await data.json()
    // console.log(PetsData);
    // LOGGED IN TERMINAL BCOZ ITS SERVER-SIDE

    return PetsData
}

export default async function Pets() {

    const PetsData = await GetPets()

    return (
        <div>
            <h1>All Pets !</h1>
            {
                PetsData.map((p, i) => {
                    return (
                        <div style={{
                            border: "1px solid black",
                            padding: "25px",
                            margin: '25px'
                        }}
                            key={i}
                        >
                            <img src={p.avatar} width="250" alt="" />
                            <h3>{p.name}</h3>
                            <Link style={{ color: "blue" }} href={`/pets/` + p.id}> VIew </Link>

                            <LinkButton ID={p.id} />
                        </div>
                    )
                })
            }

        </div>
    )
}

型

宠物详情页：projectName\src\app\pets\[id]\page.js

async function GetDetailsByID(ID) {
    let data = await fetch('https://653bf08fd5d6790f5ec7a989.mockapi.io/pets/' + ID)

    // I GOT THIS URL BY TRYING TO APPEND ID TO URL PROVIDED IN CODE

    let PetDetails = await data.json()
    // console.log(Object.keys(PetDetails));
    // LOGGED IN TERMINAL BCOZ ITS SERVER-SIDE

    return PetDetails
}

export default async function DetailsPage({ params }) {
    let Details = await GetDetailsByID(params.id)
    // AFTER GETTING ID I WILL PASS IT THE API CALL

    // THIS PAGE WILL BE SERVER RENDERED

    return (
        <div>
            <h1>Full Pet Deyails :</h1>
            <img src={Details.avatar} alt="" />
            <p className="text-gray-600">{Details.name}</p>
            <p className="text-gray-600">{Details.id}</p>
            <p className="text-gray-600">{Details.age}</p>
            <p className="text-gray-600">{Details.Gender}</p>
            <p className="text-gray-600">{Details.breed}</p>
            <p className="text-gray-600">{Details.description}</p>
            <p className="text-gray-600">{Details.createdAt}</p>



        </div>
    )
}

型

comp文件夹下的LinkButton.js组件projectName\src\app\comp\LinkButton.js**

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

const LinkButton = ({ ID }) => {
    const MyRouter = useRouter()

    // IF YOU WANT TO USE A BUTTON THEN IT COMES UNDER CLIENT SIDE 
    // RENDERING BECAUSE OF CLICK EVENT

    // HERE IM PASSING THE ID TO LINK & USING ROUTER TO NAVIGATE
    return (
        <button onClick={() => {
            MyRouter.push(`/pets/` + ID)
        }}>
            Button
        </button>
    )
}

export default LinkButton

型

而不是使用按钮，你可以样式链接标签看起来像一个按钮！

输出量：
1.后藤http：//localhost：3000/pets
1.你将有一个卡片一样的布局，与链接标签命名为蓝色的视图和按钮命名为按钮。
1.点击它们，你会进入一个页面，例如第一个宠物被点击http://localhost:3000/pets/1
1.在此页面上，详细信息通过ID获取。
1.打开控制台，然后open Network Tab点击pets，然后在右手边点击预览，你会看到页面是预先呈现的！
1.类似于详细信息页面，您将在Network Tab中单击预览，您将看到页面已预渲染。

• 评论询问任何疑问。*
• 此代码将从myside（个人电脑）中删除。*