刷新页面时 nextJS SSR useRouter() 不起作用

Question

我在我的项目中使用 nextJS SSR。现在，当我尝试使用以下代码获取页面参数时，它显示未定义。

 function About() {
  const router = useRouter();
  const { plan_id } = router.query;
  console.log(plan_id)
 }
 export default About;

当页面从其他页面路由时（没有使用“下一个/链接”重新加载页面）时它可以工作，但是当我刷新页面时它不起作用。有人可以帮忙吗？

Answer 1

 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;

• 您可以在文档中找到更多信息。

Answer 2

我自己找到了答案。实际上，当您刷新页面时，路由器不会立即初始化。所以你可以在 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”。