How can I create Single Page-CodePudding

How can I pass map items (title, category and images) in my id.jsx file.

Basically, I just want to create a single page for my projects. But I can only access post ID. I don't know how to pass other data items.

'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>
        ))}

CodePudding user response：

If I understand your question correctly, you want to send some "state" along with the route transition. This can be accomplished using an href object with the "state" on the query property, and the as prop to hide the query string.

Example:

{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>
  );
};