如何在 Next.js 静态站点生成上获取 URL 查询字符串？

问题描述

我想从 Next.js 静态站点生成的 URL 中获取查询字符串。

我在 SSR 上找到了一个解决方案，但我需要一个用于 SSG 的解决方案。

谢谢

解决方法

我实际上找到了一种方法

const router = useRouter()

useEffect(() => {
    const params = router.query
    console.log(params)
},[router.query])

,

import { useRouter } from "next/router";
const router = useRouter();

useEffect(() => {
    if(!router.isReady) return;
    const query = router.query;
  },[router.isReady]);

它有效。

,

您无权访问 getStaticProps 中的查询参数，因为它仅在构建时在服务器上运行。

但是，您可以在页面组件中使用 router.query 来检索在客户端 URL 中传递的查询参数。

// pages/shop.js

import { useRouter } from 'next/router'

const ShopPage = () => {
    const router = useRouter()
    console.log(router.query) // returns query params object

    return (
        <div>Shop Page</div>
    )
}

export default ShopPage

---

作为 @mendespedro mentioned in his answer，您可以使用 useEffect 钩子在其依赖项数组中使用 router.query 来解决第一次加载时不可用的查询字符串。