CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-hooks
Xena
Xena

Reputation: 377

how to show details page using react router dom

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>
)
}

Upvotes: 2

Views: 8486

Answers (1)

Ajeet Shah
Ajeet Shah

Reputation: 19843

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>

Upvotes: 7

Related Questions