如何用Ether.JS+React实现多页切换时保持MetaMask连接

连接状态丢失和你用ethers还是web3没有关系，核心问题有两个：一是钱包状态存放的组件层级不对，路由切换时组件卸载导致状态重置；二是缺少页面初始化时的静默连接检查逻辑，页面加载后没有主动拉取已授权的钱包账户。

1. 调整状态存放位置与NavBar渲染位置 #

把accounts和setAccounts状态定义在最顶层的App根组件（也就是包裹BrowserRouter的组件），同时把NavBar组件放到Routes标签外侧渲染，这样路由切换时NavBar和根组件都不会被卸载重挂载，状态自然不会丢失。

根组件示例代码：

// App.jsx
import { useState, useEffect } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import NavBar from './components/NavBar'
// 导入Home、Tournament、About、Medium等页面组件

function App() {
  // 全局共享钱包状态，所有路由页面、NavBar都能访问
  const [accounts, setAccounts] = useState([])

  // 初始化检查钱包连接逻辑写在这里
  useEffect(() => {
    // 后续补充的检查逻辑
  }, [])

  return (
    <BrowserRouter>
      {/* NavBar放在路由出口外侧，路由切换不会触发重挂载 */}
      <NavBar accounts={accounts} setAccounts={setAccounts} />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/tournament" element={<Tournament />} />
        <Route path="/about" element={<About />} />
        <Route path="/medium" element={<Medium />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

2. 增加页面初始化静默连接检查 #

你之前只在点击连接按钮时调用eth_requestAccounts（这个方法会唤起MetaMask弹窗），页面首次加载/刷新时，需要调用eth_accounts方法静默拉取用户之前已经授权过的账户，不会触发弹窗，直接恢复连接状态。
同时可以加钱包账户变化的监听，用户手动切换账户、断开连接时自动同步前端状态。

把下面的逻辑放到根组件的useEffect里即可：

useEffect(() => {
  const checkWalletConnection = async () => {
    // 未安装MetaMask直接返回
    if (!window.ethereum) return
    try {
      // 静默获取已授权账户，不会弹出MetaMask窗口
      const connectedAccounts = await window.ethereum.request({
        method: "eth_accounts"
      })
      if (connectedAccounts.length) {
        setAccounts(connectedAccounts)
      }
    } catch (err) {
      console.error("钱包状态检查失败:", err)
    }
  }

  checkWalletConnection()

  // 监听钱包账户切换、断开事件
  const handleAccountsChange = (newAccounts) => {
    setAccounts(newAccounts)
  }
  window.ethereum.on('accountsChanged', handleAccountsChange)

  // 组件卸载时移除监听，避免内存泄漏
  return () => {
    window.ethereum.removeListener('accountsChanged', handleAccountsChange)
  }
}, [])

3. 修复现有NavBar组件的小问题 #

你代码里已连接状态用的<navlink>是无效原生标签，会触发DOM报错，换成普通行内标签或者React Router的Link组件即可，优化后的连接状态片段：

{isConnected ? (
  <span className="metamaskButton">
    {/* 可省略显示地址，避免长地址挤占导航栏空间 */}
    {`${accounts[0].slice(0, 6)}...${accounts[0].slice(-4)}`}
  </span>
) : ( 
  <Button 
    backgroundColor="#D6517D"
    borderRadius="5px"
    boxShadow="0px 2px 2px 1px #0F0F0F"
    color="white"
    cursor="pointer"
    fontFamily="inherit"
    padding="15px"
    margin="0 15px"
    onClick={connectAccount}
  >
    Connect
  </Button>
)}

ethers 兼容说明 #

这套逻辑完全基于MetaMask注入的原生window.ethereum API实现，和ethers库100%兼容，后续初始化ethers实例直接用下面的写法即可：

import { ethers } from 'ethers'
// 连接成功后初始化
const provider = new ethers.BrowserProvider(window.ethereum)
const signer = await provider.getSigner()

不需要依赖web3.js，也不需要修改本地开发环境配置，只要浏览器安装了MetaMask插件就能正常运行，路由切换、页面刷新都能保持连接状态。

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