Javascript 反应路由器和道具

需要帮助传递来自不同组件的道具吗

我的路由结构如下

app.js

<BrowserRouter>
        <div className='App'>
          <Switch>
            <Route path='/' exact component={Home} />
            <Route exact path='/details/:type/:id' component={ItemDetails} />
          </Switch>
        </div>
      </BrowserRouter>

函数组件的呈现方式如下所示

 const UpcomingMovies = (props) => {
  const upcomingMovieResults = props.upcomingMovies.map(r => (
    <Link key={r.id} to={`/details/${r.id}`}>
      <div
        key={r.id} >
        <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} className='top-movie-results-poster' />
      </div>
    </Link>
  ))
  return <div className='top-movie-results'>
    <h2 className='top-rated-header'>Upcoming Movies</h2>
    <div>
      <Carousel infinite
        slidesPerPage={8}
        slidesPerScroll={3}
        arrows
        animationSpeed={1500}
        stopAutoPlayOnHover
        offset={50}
        itemWidth={225}
        clickToChange
        centered>{upcomingMovieResults}</Carousel></div>
  </div>
}

功能组件（itemDetails的子组件）

const MovieDetails=（道具）=>{
返回
}

我知道这是一个很大的代码，但我想给你们全谱

但基本上我遇到的问题是什么时候

在我的功能组件中，我得到了“TypeError:cannotreadproperty”type“of undefined”，它位于localhost:3000/aka home路由上，但是当我手动导航到localhost:3000/movie/12312时，它工作正常

---

因此，问题似乎在于我的主路由“localhost:3000/”没有从itemDetails中意识到{this.props.type}。。有什么想法吗？

在功能组件中，没有

这个
或者所有者有道具。直接使用道具。

<Link key={r.id} to={/details/${props.itemDetails.type}/${r.id}}>


试试这个：

<Link key={r.id} to={/details/${props.itemDetails && props.itemDetails.type}/${r.id}}>



如果这不起作用，您可能需要。
this.props.type！！！你不认为你应该使用props.type吗？你能在你的
props
中粘贴一些示例数据吗？@HarishSoni:错误本身解释说，在未定义中找不到props意味着这是未定义的，你会如何处理props数据？当我更改为“我得到类型”时，当我删除“itemDetails”并更改为{props.type}路由变为localhost:3000/undefined/1234localhost:3000/details/undefined/1234，因此类型为undefined。也许我可以在my home.js中声明类型？
  const MovieDetails = (props) => {
  return <div className='item-details'>
    <div>
      <a href='#t' className='item-name'>{props.itemDetails.title}</a>
      <a href='#t' className='item-name'>{props.itemDetails.name}</a>
    </div>
  </div>
}

<Link key={r.id} to={/details/${props.itemDetails.type}/${r.id}}>

<Link key={r.id} to={/details/${props.itemDetails && props.itemDetails.type}/${r.id}}>