使用react-router-dom的Link组件导致Tailwind CSS样式异常如何修复？

我是React初学者，在项目中使用Tailwind CSS进行样式开发。当使用react-router-dom的Link组件包裹元素后，原本的布局样式发生了改变，尝试添加inline内联样式未解决问题。以下是相关代码，同时附上使用Link组件前后的样式对比图，请问如何用Tailwind CSS解决该问题？

相关代码 #

<div className='flex flex-wrap justify-center'>
  {books?.map((book, index) => (
    <Link to={"/home/"+book.key.replace('/works/','')} >
      <div  key={index} className=' bg-slate-100 w-72 p-2 m-5 mt-20 shadow-lg rounded-lg flex flex-col items-center transition-all hover:scale-105'>
        <img className='h-52 m-3 shadow-lg' src={book.cover_i ? `https://covers.openlibrary.org/b/id/${book.cover_i}-L.jpg` : coverNotFound} alt="book cover" />
        <div className='text-center'>
          <p className='font-bold text-lg'>{book.title}</p>
          <p className='font-semibold text-'>Author: {book.author_name}</p>
          <p className='font-medium'>First Published Year: {book.first_publish_year}</p>
        </div>
      </div>
    </Link>
  ))}
</div> 

样式对比 #

• 使用Link标签前：
  
• 使用Link标签后：
  

问题根源在于Link组件会被渲染成原生<a>标签，而<a>标签默认是行内元素（inline），会破坏外层flex容器与内层div构建的布局规则。你可以通过以下两种方式修复：

方式一：给Link添加块级元素类 #

直接给Link组件加上block或inline-block类，让它拥有块级元素的布局特性，内层div样式保持不变：

<Link to={"/home/"+book.key.replace('/works/','')} className="block">
  {/* 内层div保留原有样式 */}
</Link>

方式二：将内层div的样式迁移到Link上 #

如果不需要额外的div嵌套，可把原本给div的样式类直接移到Link组件上，同时注意将key属性放在Link标签上（因为它是map循环的直接子元素）：

{books?.map((book, index) => (
  <Link 
    key={index}
    to={"/home/"+book.key.replace('/works/','')} 
    className='bg-slate-100 w-72 p-2 m-5 mt-20 shadow-lg rounded-lg flex flex-col items-center transition-all hover:scale-105'
  >
    <img className='h-52 m-3 shadow-lg' src={book.cover_i ? `https://covers.openlibrary.org/b/id/${book.cover_i}-L.jpg` : coverNotFound} alt="book cover" />
    <div className='text-center'>
      <p className='font-bold text-lg'>{book.title}</p>
      <p className='font-semibold text-'>Author: {book.author_name}</p>
      <p className='font-medium'>First Published Year: {book.first_publish_year}</p>
    </div>
  </Link>
))}

两种方式都能让Link组件的布局表现与之前的div一致，解决样式错乱问题。

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