我是 Next.js 和服务器端渲染的新手,我正在尝试为我发布的每个作业获取单独的 slug。我正在使用
app router
并设置了以下页面:src/app/Job/[slug]/page.js
这是代码:
async function getJobById(slug) {
const response = await fetch(`http://localhost:3000/api/Job/${slug}`, {
method: "GET",
});
return response.json();
}
export default async function JobId({ params }) {
const { slug } = await getJobById(params.id);
return (
<>
<h1>{slug.pay}</h1>
<h1>{slug.aboutCompany}</h1>
<h1>{slug.experience}</h1>
etc...
</>
);
}
我发布了几份工作,但是当我尝试使用位于
jobsCard.js component
<Link href={/Job/${slug}}>View job</Link>
中的链接单击其中一份工作时,我遇到了许多错误。尝试不同的解决方案。
这里是获取职位列表的 jobs api 供参考
import { useState, useMemo, useEffect } from "react";
import JobsCard from "./jobsCard.js";
const Jobs = () => {
const [jobmaps, setJobs] = useState([]);
useEffect(() => {
async function fetchJobsCard() {
try {
const response = await fetch("/api");
const data = await response.json();
if (!response.ok) {
throw new Error("Somethung went wrong");
}
setJobs(data);
} catch (error) {
console.log(error);
}
}
fetchJobsCard();
}, []);
return (
<Container maxW={"6xl"}>
{jobmaps.map((job, index) => (
<JobsCard
key={index}
companyName={job.companyName}
country={job.country}
setting={job.setting}
role={job.jobTitle}
elevatorPitch={job.aboutCompany}
experience={job.experience}
pay={job.pay}
/>
))}
</Container>
);
};
export default Jobs;
export default async function JobId({ params }) {
const { slug } = await getJobById(params.id);
}
您将
params.id
传递给 getJobById()
但您将动态路由设置为使用 [slug]
在您应该使用 params.slug
的情况下,请检查 nextjs 文档中提供的示例。
如果您想使用
id
,您可以将文件夹名称更改为job/[id]/page.js
甚至 [jobId]
并确保您在参数中使用正确的名称(params.jobId
或 params.id
,具体取决于您的文件夹名称)
我认为如果您的文件夹结构是
src/app/Job/[slug]/page.js
那么您必须访问 slug
。
所以你的代码应该是:
export default async function JobId({ params }) {
const { slug } = await getJobById(params.slug);