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 ponent={() => <Catalog data={data}/>} />
<Route path='/auction' exact ponent={() => <Auction data={data} />} />  

Once you click any of them it shows a list of cars (auction and catalog) These ponents have a mon child ponent that receives props (data. Inside this CarItem we have CarDetails ponent 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 ponent 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 ponent:

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

   
   const { id } = props.match.params
  

    return (
     
       <h4 className='text-dark'>{item.name}</h4>
)
}

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 ponent={() => <Catalog data={data}/>} />
<Route path='/auction' exact ponent={() => <Auction data={data} />} />  

Once you click any of them it shows a list of cars (auction and catalog) These ponents have a mon child ponent that receives props (data. Inside this CarItem we have CarDetails ponent 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 ponent 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 ponent:

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

   
   const { id } = props.match.params
  

    return (
     
       <h4 className='text-dark'>{item.name}</h4>
)
}

• javascript
• reactjs
• react-router
• react-hooks

• What's the type of item.id? If it's a number you're paring a number with a string (match.params.id) – Filipe Commented Mar 25, 2021 at 9:05
• @Filipe a number – Xena Commented Mar 25, 2021 at 9:11
• <CarDetails item={data.find(item => item.id === +match.params.id)}/> )} Try adding a + before match.params.id to turn into a number – Filipe Commented Mar 25, 2021 at 9:12
• @Filipe does not work ( – Xena Commented Mar 25, 2021 at 9:37

1 Answer 1

You should declare all top level routes at one place, including the one for CarDetails:

<Route path="/catalog" exact ponent={() => <Catalog data={data} />} />
<Route path="/auction" exact ponent={() => <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 ponents:

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