next.js - 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

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

Answer 2

 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 3

对于那些仍然对此有疑问的人。这是一个对我有用的解决方案

function About() {

 const [param1, setParam1]=useState("");
 const router = useRouter();
 const { param1 } = router.query() 

 useEffect(() => {
  if (!param1) {
   return;
 }

 // use param1
 }, [param1]);
}

你可以在这里找到解决方案