根据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]
和查询对象的值。
有人可以帮我吗?
答案 0 :(得分:0)
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>
)
}