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

【问题标题】：nextJS SSR useRouter() does not work when refresh pagenextJS SSR useRouter() 刷新页面时不起作用
【发布时间】：2023-03-03 20:57:01
【问题描述】：

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

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

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

【问题讨论】：

原因是Next如何处理自动静态优化页面。请参阅nextjs.org/docs/routing/dynamic-routes#caveats 和 useSWR 的好例子：github.com/vercel/next.js/discussions/15952

标签： next.js server-side-rendering dynamic-routing next-router

【解决方案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”来获取值。

【讨论】：

【解决方案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;

您可以在docs 中找到更多信息。

【讨论】：

谢谢阿曼，你是对的。即使在刷新时，我也可以通过这种方式获取参数。再次感谢。
鉴于 Next.js 也是一个静态站点生成器，它可以生成纯客户端运行的站点，因此说“做服务器端”并不是最有用的答案。

【解决方案3】：

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

function About() {

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

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

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

您可以找到solution here

【讨论】：