Блог

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

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

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

Когда вы запускаете router с помощью 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}} />
        </>
    )
}
  

read-more.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>
  )
}