reactjs - 使用带有 URL 对象的 Next.js 路由器推送时出现意外行为

Question

根据 Next.js文档，我可以使用带有 URL 对象的路由器推送功能来路由动态路径，如下例所示：

import { useRouter } from 'next/router'

export default function ReadMore({ post }) {
  const router = useRouter()

  return (
    <span
      onClick={() => {
        router.push({
          pathname: '/post/[pid]',
          query: { pid: post.id },
        })
      }}
    >
      Click here to read more
    </span>
  )
}

但是，当我尝试使用此功能时，Next.js 路由器将以下内容发送/post/[pid]?pid=1到浏览器（我们以 post id 为 1 为例），即路由器不会将 替换[pid]为查询对象的值。

有人能帮我吗？

Answer 1

ReadMore 是一种视图组件。

当您使用 click 执行路由器时，[pid] 被替换为post.id.

所以，如果你使用如下，路由器移动到http://localhost:3000/post/123

index.js

import ReadMore from "../../components/read-more";

export default function FirstPost() {
    return (
        <>
            <ReadMore post={{id: 123}} />
        </>
    )
}

阅读更多.js

import { useRouter } from 'next/router'

export default function ReadMore({ post }) {
  const router = useRouter()

  return (
    <span
      onClick={() => {
        router.push({
          pathname: '/post/[pid]',
          query: { pid: post.id },
        })
      }}
    >
      Click here to read more
    </span>
  )
}