如何在 next.js 中将 id 作为 url 的最后一部分传递答案

【问题标题】：how to pass id aslast part of url in next.js如何在 next.js 中将 id 作为 url 的最后一部分传递
【发布时间】：2022-07-19 04:34:49
【问题描述】：

我正在尝试将 id 作为 url 的最后一部分，但我不知道语法谁能帮助我<Link href="query/{itm._id}"> in next js


{Items.map((itm)  => ( 
          <Link href="query/{itm._id}">
        <Alert className="question13">{itm.Name}</Alert>
        </Link>
      ))}

我正在尝试将 id 作为 url 的最后一部分，但我不知道语法谁能帮助我<Link href="query/{itm._id}"> in next js

【问题讨论】：

href={`/query/${encodeURIComponent(itm._id)}`} -- developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…, nextjs.org/docs/api-reference/next/…

标签： next.js

【解决方案1】：

这样提交参数

<Link
      href={{ pathname: "/mypage", query: { id: item.id } }}
    >
<Alert className="question13">{itm.Name}</Alert>
</Link>

这样你就可以得到参数了

import { useRouter } from "next/router";
function mypage() {
 const router = useRouter();
 console.log(router.query);
}
export default mypage;

【讨论】：

如果我这样做，谷歌机器人会抓取网址吗？

【解决方案2】：

<Link
  href={{
    pathname: `/query`,
    query: {
      id: item.id,
    },
  }}
>
</Link>

【讨论】：

【解决方案3】：

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post

【讨论】：