在我的应用程序中使用Next/link时，我遇到了一些问题。我有一个呈现按钮的可重用组件。此组件在页面上使用两次，每次使用不同的URL。当页面处于桌面视图中时，按钮可以完美地工作。我可以从一个页面导航到另一个页面。当我将屏幕尺寸缩小到平板电脑或移动设备时，其中一个重定向正确，而另一个没有预期的响应。为了解决这个问题，我将该区域包含在一个链接中，这样用户就可以在按钮区域之外单击，并且仍然可以被定向到页面，但这并不是我真正想要提供给用户的体验。我以前从来没有吃过这个。有没有人能告诉我怎么解决这个问题，或者它为什么会这样？谢谢。

const Banner = ({purpose, imageUrl, title1, title2,desc1, linkName,buttonText}) => {
  return (
  <div className='row flex-lg-row-reverse align-items-center g-5  justify-content-center'>
    <div className=" col-10 col-sm-8 col-lg-6">  
    <Image 
    className='d-block img-fluid mx-lg-auto' 
    src={imageUrl} 
    width={700} 
    height={500} 
    alt='banner'
    loader={myLoader} />
    </div>
    <Link href={linkName} passHref>
    <div className="col-lg-4 p-3 text-center text-lg-start border-0">
      <h1 className="display-6 fw-bold lh-1 mb-3">{purpose}</h1>
      <p className="lead">{title1}<br /> {title2}</p>
      <p className="lead">{desc1}</p>

      <button className="btn link btn-primary btn-xl w-100">
      <Link href={linkName} passHref >
         <a> {buttonText}</a>
      </Link>
      </button>
    </div>
    </Link>
  </div>
  )
};

export default function Home({data}) {
const { 
  results: {
  client: {
    secondhandListing 
  }   

} 
}= data
//console.log('index page results',secondhandListing);

  return (
    <>

    <div data-spy="scroll" data-bs-target="main-nav" data-offset="0" className="scrollspy-example" tabIndex="0"> 
    <Services />

    <div className='section d-flex justify-content-center my-5'>
    <h1 className='my-5' id="#scrollspyHeading2">Properties</h1>
    </div>
    <div 
    className="container-fluid d-flex  justify-content-xxl-between align-items-center flex-wrap flex-lg-nowrap">
      <div className='section d-flex'>
      <Banner

      purpose="Rent a Home"
      title1="Rental Homes for"
      title2="Everyone"
      desc1="Explore Apartments, Villas, Homes"
      desc2="and more"
      buttonText="Explore Renting"
      linkName="/search?operationType=rent"
      imageUrl="https://bayut-production.s3.eu-central-1.amazonaws.com/image/145426814/33973352624c48628e41f2ec460faba4" 
      />
      </div>
     <div className="section d-flex">

      <Banner 
      purpose="Buy a Home"
      title1="Find, Buy & Own"
      title2="Your Dream Home"
      desc1="Explore Apartments, Villas, Homes"
      desc2="and more"
      buttonText="Explore Buying"
      linkName="/search?operationType=sale"
      imageUrl="https://bayut-production.s3.eu-central-1.amazonaws.com/image/145426814/33973352624c48628e41f2ec460faba4"/>

      </div>
    </div>       
    <Team />
    <Contact />
      </div>
      </>
  )
}