NextJS router.query 没有提供 ID 参数

Question

我正在使用 nextjs 作为前端，使用 CodeIgniter 作为后端来制作 crud 我正在学习前端是 reactjs 的教程。在 reactJs 中，当 crud 的更新部分到来时，我们可以使用 react-router-dom useParam 函数来获取 ID，但在 nextJS 中，我们使用 router.query 并且它不起作用，所以我现在陷入困境如何获取特定列的 ID 以更新它

 const { id } = router.query;

  const getProductById = async () => {
// if (id !== undefined && id != null && id > 0) {
  const response = await axios.get(`http://localhost:8080/companies/${id}`);
  setName(response.data.name);
  setCreatedBy(response.data.createdBy);
  console.log(id);
// }};

这是我正在使用的代码，它给出了一个错误

`http://localhost:8080/companies/undefined`

Answer 1

在静态优化的页面上，路由器查询在第一次呈现时可以为空。尝试将代码包装在 useEffect

中

useEffect(()=>{
 const { id } = router.query;

  const updateProduct = async (e) => {
    e.preventDefault();
    await axios.patch(`http://localhost:8080/companies/${id}`, {
      company_name: name,
      created_by: createdBy,
    });
    router.push("/products");
  };
},[router.query])

Answer 2

你可以在 server-side 上获取 query.id，然后将其传递给 client-side

export async function getServerSideProps(context) {
  const { id } = context.query;
  console.log(`query id: ${id}`);
  return { props: { id } };
}

现在 id 作为 prop 传递给客户端：

const YourComponent=(props)=>{
   console.log("passed id prop",props.id)
}

NextJS router.query 没有提供 ID 参数

NextJS router.query not giving the ID param

mysql

codeigniter

reactjs

next.js

next-router