javascript - how to show details page using react router dom - Stack Overflow

admin 管理员组

文章数量: 1086019

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

Share Improve this question Follow edited Mar 26, 2021 at 4:36 Linda Paiste 42.4k88 gold badges8080 silver badges116116 bronze badges asked Mar 25, 2021 at 8:59 XenaXena 38733 silver badges1313 bronze badges 4

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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>

本文标签： javascripthow to show details page using react router domStack Overflow