Неожиданное поведение при использовании push-уведомления маршрутизатора Next.js с объектом URL

Question

Согласно документации Next.js, я могу использовать функцию 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 в браузер (мы берем, например, идентификатор сообщения 1), то есть роутер не заменяет [pid] со значением объекта запроса.

Кто-нибудь может мне помочь?

Answer 1

ReadMore — это своего рода компонент представления.

Когда вы запускаете маршрутизатор с помощью клика, [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>
  )
}