nextjs 通过Link跳转到相同组件上,页面无刷新?

作者站长头像
站长
· 阅读数 7

预期:博客首页是/blog通过/blog?page=1&category=1返回不同的数据但我用link跳转后发现数据不刷新,但我手动刷新有效果,我看官方文档(https://nextjs.zhd.icu/docs/routing/shallow-routing)说使用shallow,但我试完并没效果,跳转后getServerSideProps依然没有触发,请问这是为什么?有大佬告知吗?

nextjs 通过Link跳转到相同组件上,页面无刷新?

nextjs 通过Link跳转到相同组件上,页面无刷新?

回复
1个回答
avatar
test
2024-07-01

因为改变的是 query 参数而不是页面路径呀,可以通过监听 query 参数的改变来执行查询函数。你提供的文档里面也说的很清楚了:

浅层路由允许你改变 URL不需要再次运行数据获取

下面的例子中也提到了使用 useRouter 来获取路由参数变更搭配 useEffect 来执行数据获取操作。或者通过 componentdidupdate 来获取新的 query 信息去执行数据获取操作。

所以和是不是使用浅路由并没有关系,也不是数据不刷新的问题。而是本来路由就没有改变,改变的只有 query 参数。你也没有去监听 query 参数的改变,单纯只是使用了 getServerSideProps 在服务端做了一次数据请求和预渲染。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容