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

Question

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

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

谢谢

Answer 1

import { useRouter } from "next/router";
import { useEffect } from "react";

const router = useRouter();

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

有效。

Answer 2

我确实找到了这样做的方法

const router = useRouter()

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

Answer 3

您无权访问 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

---

如果页面没有数据获取方法，router.query 将在页面第一次加载时为空对象，此时页面在服务器上预生成。

来自next/router 文档：

query: Object - 解析为对象的查询字符串。这将是 如果页面没有data fetching requirements，则在预渲染期间为空对象。 默认为{}

作为@zg10 mentioned in his answer，您可以通过使用useEffect 的依赖数组中的router.isReady 属性来解决此问题。

来自next/router object 文档：

isReady:boolean - 路由器字段是否更新 客户端并准备使用。只能在内部使用 useEffect 方法，不适用于在服务器上进行条件渲染。