对于contenxt,我正在为一个宠物救援慈善机构建立一个网站,我正在使用Next.js。我是Nextjs的新手,不知道如何让我的按钮或链接到实际工作的propective.I目前得到一个404错误此页面无法找到,当我试图让按钮带我到另一个页面,我已经建立在我的下一个应用程序。
我试过几种方法。
有人能帮忙吗?”
这里是卡组件:
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="/[petId]" as={`/adote/${pet.name}`} passHref>
<Button
label="Ver perfil"
onClick={onClick}
className="bg-indigo-500 hover:bg-gray-600 focus-visible:outline-indigo-600 w-32 flex flex-row justify-center items-center"
/></Link>
</div>
)
}
字符串
该按钮应该转到此petId页面:
'use server'
import React from 'react';
import { useRouter } from 'next/router';
export default function PetDetailPage() {
const router = useRouter();
const pet = JSON.parse(router.query);
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>
);
}
型
我不介意它现在只是一个占位符页面。我有这个来自我制作的模拟API的模拟数据,它在主采用页面上没有任何问题:
'use client';
import React from 'react';
import CustomizableHero from "../../components/HeroScondary";
import PetCard from "../../components/PetCard";
import Button from '../../components/Button';
import { useState, useEffect } from 'react'
export default function Adote() {
// mock API
const [pets, setPets] = useState([])
const [loading, setLoading] = useState(true)
const [page, setPage] = useState(1)
useEffect(() => {
const fetchPets = async () => {
setLoading(true)
const url = new URL('https://mockID.mockapi.io/pets')
url.searchParams.append('completed', false)
url.searchParams.append('page', page)
url.searchParams.append('limit', 18)
const res = await fetch(url)
const data = await res.json()
setPets(prevPets => [...prevPets, ...data])
setLoading(false)
}
fetchPets()
},
[])
if (loading) {
return <p>Loading...</p>
}
const handlePetClick = (petId) => {
router.push(`/adote/${petId}`)
}
return (
<div className="relative">
<CustomizableHero
backgroundImage="/images/dois-cachorros.png"
title="Adote"
subtitle="Encontre o seu melhor amigo"
color="white"
/>
{/* search filter */}
<div className="flex flex-row">
</div>
{/* pet cards */}
<div className="absolute w-[100vw] max-w-screen flex flex-col justify-center ">
<div className="flex flex-col text-align-center items-center justify-between m-10">
<h2 className="text-5xl font-bold tracking-tight sm:text-5xl text-gray-500 p-5">Animais buscando uma familia</h2>
<p className="mt-6 mb-3 text-md leading-8 text-gray-500 text-center p-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nulla ut condimentum maximus, felis enim rhoncus justo, vel venenatis magna tortor nec tortor. Donec vulputate fermentum fermentum. Curabitur odio dui, consectetur vitae ornare eu, ultricies vel risus</p>
</div>
{/* Called displayPetCards() inside JSX code to render the PetCard components. */}
<div className="grid grid-cols-3 gap-4 m-10 p-5">
{pets.map(pet => (
<PetCard
key={pet.id}
pet={pet}
onClick={()=> handlePetClick(pet.id)}
/>
))}
</div>
<p className="flex flex-col text-center mt-5">Visualizados 18 de 661 animais de estimação</p>
<div className="flex justify-center m-10">
<Button
label="Mostrar mais"
onClick={() => setPage(page + 1)
} // Attach the click handler here
className="bg-indigo-500 hover:bg-gray-600 focus-visible:outline-indigo-600"
/>
</div>
</div>
</div>
);
};
型
我试过useRouter,我试过getServerSideProps(),但都不起作用
2条答案
按热度按时间mrphzbgm1#
不要把事情复杂化,你已经在petCard组件中传递了pet.id,只是从那里链接它。
字符串
然后通过参数在PetDetailPage中搜索pet的具体id
型
lfapxunr2#
下面是我做的一个示例代码:解释:
1st is Link tag
和2nd is a Button as link
pets folder
上文件夹结构:
字符串
pets/id
pets/[id]/page.js
下您可以阅读本文以获得更清晰的概念:
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
型
宠物详情页:
projectName\src\app\pets\[id]\page.js
型
comp文件夹下的LinkButton.js组件
projectName\src\app\comp\LinkButton.js
**型
而不是使用按钮,你可以样式链接标签看起来像一个按钮!
输出量:
1.后藤http://localhost:3000/pets
1.你将有一个卡片一样的布局,与链接标签命名为蓝色的视图和按钮命名为按钮。
1.点击它们,你会进入一个页面,例如第一个宠物被点击
http://localhost:3000/pets/1
1.在此页面上,详细信息通过ID获取。
1.打开控制台,然后
open Network Tab
点击pets
,然后在右手边点击预览,你会看到页面是预先呈现的!1.类似于详细信息页面,您将在
Network Tab
中单击预览,您将看到页面已预渲染。