NextJS钱包认证成功后无法重定向至onboard页面求助

你的问题出在没有监听钱包连接状态的变化，而且你写的handleConnect函数根本没和Web3Button绑定，自然不会触发重定向。另外初始状态下provider是undefined，就算绑定了也不会生效。

直接用wagmi提供的useAccount钩子监听连接状态，一旦钱包连接成功就触发跳转，具体修改如下：

import React, { useEffect } from "react";
import { Web3Button } from "@web3modal/react";
import { useAccount } from "wagmi"; // 替换useProvider为useAccount
import { useRouter } from "next/router";

const Hero = () => {
  const router = useRouter();
  const { isConnected } = useAccount(); // 获取连接状态

  // 监听连接状态变化，成功连接后跳转
  useEffect(() => {
    if (isConnected) {
      router.push("/onboard");
    }
  }, [isConnected, router]); // 依赖项加入isConnected和router

  return (
    <main className="container mx-auto">
      <div className="flex flex-col flex-wrap items-center space-y-6 justify-center h-[70vh]">
        <h2 className="text-2xl px-4 text-center md:text-4xl sm:text-3xl lg:text-5xl font-bold ">
         Title
        </h2>
        <p className="px-4 text-center text-md md:text-xl lg:text-2xl">
         Description
        </p>
        <Web3Button />
      </div>
    </main>
  );
};

export default Hero;

关键说明： #

• useAccount钩子会实时返回钱包的连接状态isConnected，当用户通过Web3Button成功连接钱包后，isConnected会从false变为true。
• useEffect会在isConnected变化时触发，此时判断状态为true就执行页面跳转。
• 不需要手动绑定点击事件，Web3Button内部已经封装了钱包连接的逻辑，我们只需要监听连接结果即可。

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