如何在 Nextjs 中渲染任何东西之前初始化路由器？

Question

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

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

  const router = useRouter()

  const { id } = router.query

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

  return value...
}

Answer 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标志。当它是 true 时，应该解析查询参数。

如何在 Nextjs 中渲染任何东西之前初始化路由器？

How to initialize router before rendering anything in Nextjs?

next.js

react-query