如何在 Nextjs 中渲染任何内容之前初始化路由器？答案

【问题标题】：How to initialize router before rendering anything in Nextjs?如何在 Nextjs 中渲染任何内容之前初始化路由器？
【发布时间】：2021-11-18 10:04:44
【问题描述】：

我正在使用 react-query，当我从 url 获取 id 并尝试在 getSubject 中调用它时，它传递了一个未定义的值 http://localhost:3000/api/subject/undefined

但是当我单击另一个组件的链接以进入此主题组件时，它可以工作，但是如果刷新页面，它就不起作用了。

  const router = useRouter()

  const { id } = router.query

  const { data } = useQuery('subjects', async () => await getSubject(id))

  return value...
}

【问题讨论】：

这是否回答了您的问题：Conditionally calling an API using React-Query hook？您可以使用Dependent Queries，因此只有在设置了id（即{ enabled: !!id }）时才会运行查询。

标签： next.js react-query

【解决方案1】：

在这种情况下，您应该使用getServerSideProps。它可以访问查询参数。最重要的是你can prefetch data on the server side too。

export interface PageProps {
  id: string;
}

export function Page({ id }: PageProps ) {
  const { data } = useQuery('subjects', async () => await getSubject(id))
}

export const getServerSideProps: GetServerSideProps<PageProps > = async ({
  params,
}) => {
  const { id } = params;

  return {
    props: {
      id,
    },
  };
};

如果你还想使用路由器，你可以等待router.isReady flag。为true时，需要解析查询参数。

【讨论】：