javascript - 如何使用反应路由器dom显示详细信息页面
问题描述
我使用路由在页面之间切换。我有 App.js,其中有我的导航栏和路线。
这些是我遇到问题的路线:
<Route path='/catalog' exact component={() => <Catalog data={data}/>} />
<Route path='/auction' exact component={() => <Auction data={data} />} />
一旦您单击其中任何一个,它就会显示汽车列表(拍卖和目录)这些组件有一个公共子组件接收道具(数据。在这个 CarItem 中,我们有 CarDetails 组件,它必须呈现每个汽车项目的详细信息。问题是CarDetails 不起作用(问题 - 传递的道具未定义。
这是 CarItem 组件,我在其中链接到 CarDetails 页面并创建一条路线。或者我应该把这条路线放在 App.js 上???
const CarItem = (data) => {
{data.data.data.map(item => {
return(
<>
<img src={imageCar} className='img-feature'/>
<h5 className='bold'>{item.name}</h5>
<h5 className='color-yellow'>$ {item.price}</h5>
<Link className='btn-item auction-btn mr-2' to={`/carDetails/${item.id}`}>Details</Link>
</div>
<Route exact path={`/carDetails/:id`} render={({match}) => (
<CarDetails item={data.find(item => item.id === match.params.id)}/> )}
/>
</>
这是 CarDetails 组件:
const CarDetails = ({item}) => {
console.log(item, ' for car details')
const { id } = props.match.params
return (
<h4 className='text-dark'>{item.name}</h4>
)
}
解决方案
您应该在一个地方声明所有顶级路线,包括CarDetails
:
<Route path="/catalog" exact component={() => <Catalog data={data} />} />
<Route path="/auction" exact component={() => <Auction data={data} />} />
<Route
exact
path="/carDetails/:id"
render={({ match }) => (
<CarDetails item={data.find((item) => String(item.id) === String(match.params.id))} />
)}
/>
并使用如下链接重定向到CarDetails
组件:
<Link className="btn-item auction-btn mr-2" to={`/carDetails/${item.id}`}>
Details
</Link>
推荐阅读
- python - 使用 fuzz.ratio 时出现类型错误
- python - 重命名多索引数据框熊猫
- android - 使用 Picasso、Glide、Image Loader、Universal Image Loader 加载图像失败
- gatsby - 如何在 Gatsby 中推迟脚本?
- asp.net - 如何在 asp.net GridView 的单个文本框中显示 3 个字段
- unity3d - 启用 Vuforia 时 Unity 崩溃
- r - 根据条件删除列
- angular - mat-list 的 formControlName 给出 'mat-form-field 必须包含 MatFormFieldControl'
- selenium-webdriver - 如何在写入 Excel 时阻止 POI 附加数据
- sql - 用于数据更新的 SQL 查询