如何与Ether.js一起在多个页面上连接元张并做出反应？

Question

我的Navbar看起来像这样，我想在更改页面时保持元掩体连接（我使用React Router dom从页面上到页面）。我尝试了多种解决方案，但是它不起作用，因为我在本地，或者是因为我正在使用ethers而不是Web3 :(

import { Box, Button, Flex, Image, Spacer } from '@chakra-ui/react';
import Logo from "../../assets/img/bitook-dark.png";
import { Link } from 'react-router-dom';



const NavBar = ({ accounts, setAccounts }) => {
    const isConnected = Boolean(accounts[0]);

    async function connectAccount() {
        if (window.ethereum) {
            const accounts = await window.ethereum.request({
                method: "eth_requestAccounts",
            });
            setAccounts(accounts);
        }
    }

    return (
        <Flex justify="space-between" align="center" padding="30px">
            {/* Left Side - Social Medias Icons */}
            <Flex justify="space-around" width="40%" padding="0 75px">
                <img className="logoHome" src={Logo} alt="logo"/>
            </Flex>

            {/* Right Side - Sections and Connect */}
            <Flex justify="space-between" align="center" width="50%" padding="30px">
                <Link className="navLink" to='/' >Home</Link>
                <Spacer />
                <Link className="navLink" to='/tournament' >Tournament</Link>
                <Spacer />
                <Link className="navLink" to='/about' >About</Link>
                <Spacer />
                <Link className="navLink" to='/medium' >Medium</Link>
                <Spacer />
            
            {/* Connect */}
                {isConnected ? (
                    <navlink className="metamaskButton">Connected</navlink>
                ) : ( 
                    <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>
                )}
            </Flex>
        </Flex>
    );
};

export default NavBar; 

感谢您的帮助：D