nextjs 通过Link跳转到相同组件上,页面无刷新?
预期:博客首页是/blog通过/blog?page=1&category=1返回不同的数据但我用link跳转后发现数据不刷新,但我手动刷新有效果,我看官方文档(https://nextjs.zhd.icu/docs/routing/shallow-routing)说使用shallow,但我试完并没效果,跳转后getServerSideProps依然没有触发,请问这是为什么?有大佬告知吗?
回复
1个回答
test
2024-07-01
因为改变的是 query
参数而不是页面路径呀,可以通过监听 query
参数的改变来执行查询函数。你提供的文档里面也说的很清楚了:
浅层路由允许你改变 URL
而不需要再次运行数据获取。
下面的例子中也提到了使用 useRouter
来获取路由参数变更搭配 useEffect
来执行数据获取操作。或者通过 componentdidupdate 来获取新的 query
信息去执行数据获取操作。
所以和是不是使用浅路由并没有关系,也不是数据不刷新的问题。而是本来路由就没有改变,改变的只有 query
参数。你也没有去监听 query
参数的改变,单纯只是使用了 getServerSideProps
在服务端做了一次数据请求和预渲染。
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容