访问 nextjs 中的动态查询参数

Question

我有一个 nextjs 项目，我有一条像这样的路线 => /类别/224？品牌[0]=6。 我想当这个查询发生变化时 forExample /categories/224?brand[0]=8 我的 useEffect 再次运行 这是我的使用效果

    const router = useRouter();

useEffect(()=>{
  console.log('hey there');
},[])

我不希望我的 useEffect 在整个 router.query 更改时运行，我只是在 router.query.brand[0] 更改时运行。

Answer 1

首先，简单的答案是将要控制 useEffect 的变量放入其依赖项数组中，

useEffect(() => {
    console.log('hello')
}, [router.query.brand])

如 juiliomalves 指出的那样。

现在，router.query.brand 中的每次更改都将触发此 useEffect 代码。
但是，无论您的 useEffect 如何，其他路由器更改通常都会影响页面。

Answer 2

    const router = useRouter();

useEffect(()=>{
  console.log('hey there');
},[])