Next.js 中的动态路由错误。尝试根据 slug 获取并显示个人详细信息

Question

我是 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;

Answer 1

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

，具体取决于您的文件夹名称）

Answer 2

我认为如果您的文件夹结构是

src/app/Job/[slug]/page.js

那么您必须访问

slug

。

所以你的代码应该是：

export default async function JobId({ params }) {
  const { slug } = await getJobById(params.slug);