如何解决将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>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。