将Next.js路由器推送与URL对象一起使用时发生意外行为

问题描述

根据Next.js documentation，我可以将Router Push函数与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发送到浏览器（例如，我们的发布ID为1），也就是说，路由器不会替换[pid]和查询对象的值。

有人可以帮我吗？

解决方法

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