how to show details page using react router dom

user_13224113 0
Viewed 4121

I use routes to switch between pages. I have App.js where I have my navbar and routes.

These are routes I have problem with:

<Route path='/catalog' exact component={() => <Catalog data={data}/>} />
<Route path='/auction' exact component={() => <Auction data={data} />} />

Once you click any of them it shows a list of cars (auction and catalog) These components have a common child component that receives props (data. Inside this CarItem we have CarDetails component that has to render details of each car item. The problem is that CarDetails does not work ( the issue - props that are passed are undefined.

this is CarItem component where I link to CarDetails page and create a Route. Or I should put this route on 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)}/>  )}
     />
        </>

and this is CarDetails component:

const CarDetails = ({item}) => {
   console.log(item, ' for car details')

   
   const { id } = props.match.params
  

    return (
     
       <h4 className='text-dark'>{item.name}</h4>
)
}
react-router react-hooks reactjs javascript
1 Answers

You should declare all top level routes at one place, including the one for 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))} />
  )}
/>

And use a link like below to redirect to CarDetails components:

<Link className="btn-item auction-btn mr-2" to={`/carDetails/${item.id}`}>
  Details
</Link>
user_28735380
Related