如何从另一个页面的nextjs中的router.push获取id？

Question

大家。我无法从“编辑项目”页面的 Next.js 中的动态页面访问 id。这是我的文件夹

我有这个组件，因此我可以导航到编辑项目页面

"use client";

import Image from "next/image";
import { Button } from "../ui/button";
import { useRouter } from "next/navigation";

interface EditProjectProps {
  editProjectId: string;
}
export const EditProject = ({ editProjectId }: EditProjectProps) => {
  const router = useRouter();

  const editProject = () => {
    //Go to Edit project page
    router.push(`/user/projects/${editProjectId}`);
  };
  return (
    <Button variant="ghost" onClick={editProject}>
      <Image
        src="/images/EditIcon.png"
        alt="Edit Icon"
        width={20}
        height={20}
      />
    </Button>
  );
};

到目前为止，一切都还好，这是导航后出现的网址 user/projects/669120f48be2051c82f359c3 现在我如何从 url 访问页面的 id，因为我需要调用它并使用 api 来获取该 id 的数据项目。我一直在使用 router.query 但出现错误

 const { editProjectId } = router.query;

Property 'query' does not exist on type 'AppRouterInstance'

谢谢你希望你能帮助我！

Answer 1

为了访问路由参数，您必须使用

useParams

钩子。例如

'use client'
 
import { useParams } from 'next/navigation'
 
export default function EditProject() {
  const params = useParams<{ editProjectId: string; }>()
 
  // `params` -> { editProjectId: '669120f48be2051c82f359c3' }
  console.log(params)
 
  return <></>
}