Link in react-router-dom removing css

Question

I was trying to have individual divs take me to different pages, using this code in my 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>

But CSS formatting went out of shape: Formatting error

This is how it looks without the link tags enclosing the product component: without formatting error How do I put links on the divs, without having any formatting changes?

Home.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;
}

Product.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

You can try the following

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

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