刷新页面时，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中找到更多的信息。