如何在 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

您无权访问查询参数，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- 解析为对象的查询字符串。如果页面没有获取数据的需求，那么在预渲染期间它将是一个空对象。默认为{}

正如@zg10 在他的回答中提到的，您可以通过使用a的依赖项数组router.isReady中的属性来解决这个问题。useEffect

从next/router对象文档：

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