React小屏（<600px）下嵌套Link的按钮无法跳转问题排查

在React前端开发中遇到以下问题：当浏览器宽度≤600px时，嵌套在Link组件内的跳转按钮无法正常导航到目标页面，但宽度≥600px的大屏模式下功能完全正常。

相关代码 #

条件渲染列表的JSX代码 #

<div className='SearchInputMain'>
  <div className='RestSearchInput'>
      <input className="icon" type="text" placeholder="  Search for restaurants" onMouseEnter={() => this.setState({ isHovering : true})}
  style={{ paddingLeft: '50px', fontFamily: 'Poppins', opacity: "85%" }} onChange={(e) => this.handleSearchChange(e)} /></div>
     <div className='RestSearchDetails'>
         {
   this.state.isHovering &&
   <div className='RestaurantListCSS1' onMouseLeave={() => this.setState({ isHovering: false})}>
      {
                                   
         <>
        {
             restaurantList ? restaurantList : ''
          }
       </>
           }
        </div> 
          }
     </div>
</div>

按钮JSX代码 #

<Link to='/restaurants/filter/1' > 
  <button className='btn btn-success Search_More' onClick={() => console.log('search clicked')}> 
    Search restaurants All over India !!! Click Here !! 
  </button> 
</Link>

CSS媒体查询代码 #

小屏（≤600px）样式

@media screen and (max-width:600px) {
/*  SearchBar css for small mobile*/
   .SearchInputMain{
      position: relative;
      width: 400px;
      height: 229px;
      margin-top: 15px;
      margin-left: 30px;
      z-index: 2;
   }

  .Search_More{    /* 这个按钮在小屏下被遮挡，点击无法跳转 */
    position:relative;
    display: inline-block;
    margin-left: 80px;
    margin-top: 10px;
    z-index:1;
  }
}

大屏（≥600px）样式

@media screen and (min-width:600px) {
/*  SearchBar css for large*/
   .SearchInputMain{
      position: absolute;
      width: 400px;
      height: 229px;
      margin-top: -60px;
      margin-left: 590px;
      
   }

  .Search_More{  /* 大屏下功能正常 */
    position: absolute;
    margin-left: 680px;
    top: 518px;
    
  }
}

疑问 #

是否是小屏模式下元素重叠导致Link或按钮无法工作？或是React或CSS存在其他问题？

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