javascript - react-router-dom 中的链接删除 css

Question

我试图让单个 div 将我带到不同的页面，在我的 home.js 中使用此代码

 <Link to="Subject1">
   <Product
     title="The Lean Startup"
     image="https://images-na.ssl-images-amazon.com/images/I/51Zymoq7UnL._SX325_BO1,204,203,200_.jpg"
   />
 </Link>

 <Link to="The Lean Startup">
   <Product
     title="The stone"
     image="https://images-na.ssl-images-amazon.com/images/I/51Zymoq7UnL._SX325_BO1,204,203,200_.jpg"
   />
 </Link>
 <Link to="Subject1">
   <Product
     title="The Lean Startup"
     image="https://images-na.ssl-images-amazon.com/images/I/51Zymoq7UnL._SX325_BO1,204,203,200_.jpg"
   />
 </Link>

但是 CSS 格式变形了:
Formatting error
这是没有包含产品组件的链接标签的外观:
without formatting error
如何在不更改任何格式的情况下将链接放在 div 上？
主页.css:

.home {
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 1500px;
    background-color: grey;
}
.home_row {
    display: flex;
    flex: 1;
    width: 100%;
    margin-left: 5px;
    margin-right: 5px;
}

产品.css:

.product {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin: 10px;
    padding: 10px;
    width: 100%;
    max-height: 400px;
    min-width: 100px;
    background-color: white;
    border-radius: 10px;
}

.product > img {
    max-height: 200px;
    width: 100%;
    object-fit: contain;
    margin-bottom: 15px;
}

.product_info {
    height: 100px;
}
.product_info > p {
    font-size: 30px;
    color: black;
}

Answer 1

您可以尝试以下方法

const ProductLink= <Product /> //add your props using loops

<Link to="/" component={ProductLink} />