javascript - react-router-dom 中的链接删除 css
问题描述
我试图让单个 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
这是没有包含产品组件的链接标签的外观: 没有格式错误 如何在不更改任何格式的情况下将链接放在 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;
}
解决方案
您可以尝试以下方法
const ProductLink= <Product /> //add your props using loops
<Link to="/" component={ProductLink} />
推荐阅读
- c# - 是否可以使用 url 生成客户端模型来招摇文档?
- cmake - 如何在 CMake 中制作一个用 Tcl 编写的项目?
- c# - 具有空值的 C# WPF 复选框?
- c# - 在基本静态构造函数中显式调用静态构造函数
- c# - C# 区域中的“标识符引用”
- android - Android Studio libgdx setToOrtho(ydown = true) 不起作用
- r - 如何在 Power Bi 中为 R 中的 ggplot2 geom_line 函数排除零
- javascript - 将页面链接在一起
- python - 如何在 Pandas 中重新索引数据框?
- blockchain - 是否可以查询区块链 API 以获取有关货币兑换的信息?