reactjs - 如何在 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- 解析为对象的查询字符串。如果页面没有数据获取要求，则在预渲染期间它将是一个空对象。默认为{}

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

从next/router对象文档中：

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