如何创建单页

Question

如何在我的 id.jsx 文件中传递地图项（标题、类别和图像）。

基本上，我只想为我的项目创建一个页面。但是我只能访问post ID。我不知道如何传递其他数据项。

'Projects folder'

[id].js

import { useRouter } from "next/router";

const Details = () => {
  const router = useRouter();
  return <div>Post #{router.query.id}

// Single Project Title = {project.title} (like this)

</div>;
};

export default Details;

index.js

import { MyProjects } from "./MyProjects";

const Projects = () => {
  const [projects, setProjects] = useState(MyProjects);

 {projects.map((project) => (
          <Link
            href={"/projects/" + project.id}
            key={project.id}
            passHref={true}
          >
            <div className="project__item">
              <div className="project__image">
                <Image src={project.image} alt="project" />
              </div>
              <div className="project_info">
                <h5>{project.category}</h5>
                <h3>{project.title}</h3>
              </div>
            </div>
          </Link>
        ))}

Answer 1

如果我对你的问题的理解正确，你想在路由转换的同时发送一些“状态”。这可以使用 href 对象和 query 属性上的“状态”和隐藏查询字符串的 as 属性来实现。

示例：

{projects.map((project) => (
  <Link
    key={project.id}
    href={{
      pathname: "/projects/" + project.id,
      query: {
        id: project.id,
        category: project.category,
        title: project.title
      }
    }}
    passHref={true}
    as={"/projects/" + project.id}
  >
    <div className="project__item">
      <div className="project__image">
        <Image src={project.image} alt="project" />
      </div>
      <div className="project_info">
        <h5>{project.category}</h5>
        <h3>{project.title}</h3>
      </div>
    </div>
  </Link>
))}

...

const Details = () => {
  const router = useRouter();
  return (
    <div>
      <div>Post #{router.query.id}</div>
      <div>Title {router.query.title}</div>
      <div>Category {router.query.category}</div>
    </div>
  );
};

如何创建单页

How can I create Single Page

reactjs

next.js

dynamic-routing