Next.js中按钮onClick事件执行后如何携带group_id完成路由重定向

1. 修正useRouter导入错误 #

你之前导入的是Next.js内部的Router类，不是用于客户端跳转的useRouter钩子，根据你使用的路由模式选择正确的导入方式：

• 如果你用的是Pages Router（页面存放在pages/目录下）：

  import { useRouter } from 'next/router'
  

• 如果你用的是App Router（页面存放在app/目录下）：
  首先需要在组件顶部添加客户端组件标识，再导入useRouter：

  'use client'
  import { useRouter } from 'next/navigation'
  

2. 解决点击两次才跳转的问题 #

React的setState是异步批量更新的，调用setNum后num状态不会立刻生效，所以第一次执行router.push(num)时拿到的还是初始空值，第二次点击才能拿到上一次更新后的路径。你完全不需要用state存储跳转路径，直接用插入返回的group_id拼接路径跳转即可。

3. 修正Supabase插入配置 #

Supabase的insert方法默认不会返回插入的行数据，需要补充调用.select()才能拿到生成的group_id，否则data会是undefined。

4. 完整修正后代码 #

逻辑部分代码 #

// 注意根据你的路由模式选择上文中对应正确的useRouter导入
const router = useRouter()
// 原用来存储跳转路径的num状态可以直接删除
const createGroup = async () => {
  const { data, error } = await supabase
    .from("chatgroups")
    .insert([
      {
        group_name: groupName,
        creator: user.email,
        description: groupDesc,
        accepted_members: user.email + " ",
        invited_members: ""
      }
    ])
    .select() // 补充这行，返回插入的行数据

  if (error) {
    console.log(error);
  } else {
    // 直接拼接你需要的目标路径，不需要经过state中转
    const targetPath = `/groups/invite_members/${data[0].group_id}`;
    router.push(targetPath);
  }
};

按钮部分代码（无需修改，保持原有逻辑即可） #

<button type="button" className="bg-yellow-500 rounded px-12 py-2" onClick={()=> {
  createGroup()
}} >Insert test group</button>

内容的提问来源于stack exchange，提问作者Ryan Millares