React与DaisyUI：解决导航后抽屉式菜单不自动关闭的问题

<div className="drawer">
  <input id="my-drawer-3" type="checkbox" className="drawer-toggle" /> 
  <div className="drawer-content flex flex-col">
    {/* Navbar content */}
    <div className="w-full navbar bg-base-100">
      <img src={Logo} className='ml-3 w-40 justify-end mr-auto' alt="" />
      <div className="flex-none lg:hidden">
        <label htmlFor="my-drawer-3" className="btn btn-square btn-ghost">
          <HiMenuAlt3 className='w-6 h-6'/> {/* 假设这里是菜单图标 */}
        </label>
      </div> 
      <div className="flex-none hidden lg:block font-semiBold">
        <ul className="menu menu-horizontal">
          {/* 导航链接将在这里 */}
          <Link to='/' id='a' className='mr-20 a'>Games</Link>
          <Link to='/about-us' id='a' className='mr-20 a'>Hardware</Link>
          <Link to='' id='a' className='mr-20 a'>Services</Link>
          <Link to='' id='a' className='mr-20 a'>News</Link>
          <img src={ShoppingBag} className='w-6 -ml-6 mr-5 cursor-pointer' alt="shopping-bag" />
        </ul>
      </div>
    </div>

    {/* 页面内容 children */}
    {/* ... */}
  </div>
  {/* Drawer side content */}
  <div className="drawer-side">
    <label htmlFor="my-drawer-3" className="drawer-overlay"></label>
    <ul className="menu p-4 w-80 min-h-full bg-base-200 text-base-content">
      {/* 移动端侧边栏链接 */}
      <li><Link to='/' onClick={() => { document.getElementById("my-drawer-3").click(); }}>Games</Link></li>
      <li><Link to='/about-us' onClick={() => { document.getElementById("my-drawer-3").click(); }}>Hardware</Link></li>
      {/* 其他侧边栏链接 */}
    </ul>
  </div>
</div>

import { Link } from 'react-router-dom';
// ...其他导入

// 示例：修改后的导航链接
<Link 
  to='/' 
  onClick={() => { document.getElementById("my-drawer-3").click(); }} 
  id='a' 
  className='mr-20 a'
>
  Games
</Link>

<Link 
  to='/about-us' 
  onClick={() => { document.getElementById("my-drawer-3").click(); }} 
  id='a' 
  className='mr-20 a'
>
  Hardware
</Link>

{/* 对所有需要关闭抽屉的导航链接重复此操作 */}