Next.js 在 href 链接路由之前执行 onClick 事件

Question

语境

我正在使用 Next.js 13。我正在使用 apollo 客户端来存储一些客户端变量。

我正在尝试做什么

我试图在导航到 href 位置之前执行 onClick 函数。

我的代码

<Link
      href={`/session/${session.id}`}
      onClick={() => {            
        updateDialogVars({
          dialogOpen: ATTENDANCE_DIALOG,
        })
      }}
    >
    <div>
      stuff
    </div>
</Link>

updateDialogVars 是一个突变，更新 apollo 客户端中的反应变量。

问题

是否可以使用 Next.js Link 组件并在使用 href 进行路由之前执行 onClick 事件？在 onClick 函数执行后，将 Link 更改为 div 并使用下一个路由器来推送路由更改的唯一选项是？

Answer 1

这通常是通过按钮和路由器钩子而不是锚标记（链接）来实现的。

import { useRouter } from "next/router"; // if you use pages dir
import { useRouter } from "next/navigation"; // if you use app dir

const SomeComponent = () => {
 const router = useRouter();

 const onClick = async () => {
  updateDialogVars(...yourConfig);
  if(someCondition) {
   await router.push(`/session/${session.id}`);
  }
 }

 return (
  <button onClick={onClick}>Label</button>
 )
}

您也可以使用 next/link 获得类似的结果。

import { useRouter } from "next/router"; // if you use pages dir
import { useRouter } from "next/navigation"; // if you use app dir
import Link from "next/link";

const SomeComponent = () => {
 const router = useRouter();

 const onClick = async (event) => {
  event.preventDefault();
  updateDialogVars(...yourConfig);
  if(someCondition) {
   await router.push(event.target.href);
  }
 }

 return (
  <Link href={`/session/${session.id}`} onClick={onClick}>Label</Link>
 )
}