如何解决刷新页面时,nextJS SSR useRouter不起作用
我在我的项目中使用nextJS SSR。现在,当我尝试使用以下代码获取页面参数时,它显示为未定义。
function About() {
const router = useRouter();
const { plan_id } = router.query;
console.log(plan_id)
}
export default About;
当页面从其他页面路由时有效(不带“下一个/链接”重新加载页面),但刷新页面时不起作用。有人可以帮忙吗?
解决方法
我找到了答案自我。实际上,当您刷新页面时,路由器不会立即初始化。因此,您可以按如下所示在UseEffect挂钩下添加该代码,并可以获取参数
function About() {
const [param1,setParam1]=useState("");
const router = useRouter();
useEffect(() => {
if (router && router.query) {
console.log(router.query);
setParam1(router.query.param1);
}
},[router]);
}
当该路由器参数更改时,它将调用“ UseEffect”,可用于检索值。
,- 如果要访问参数,请按Next.js样式进行操作。如果数据可以由服务器本身提供,则无需在客户端上运行代码。这就是SSR背后的想法。
function About({plan_id}) {
console.log(plan_id)
}
// this function only runs on the server by Next.js
export const getServerSideProps = async ({params}) => {
const plan_id = params.plan_id;
return {
props: { plan_id }
}
}
export default About;
- 您可以在docs中找到更多的信息。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。