如何使用反应路由器dom显示详细信息页面

Question

我使用路由在页面之间切换。 我有 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>
)
}

Answer 1

您应该在一个地方声明所有顶级路线，包括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>