Javascript ReactJS路由组件/渲染

我创建了一个包含3个文件的简单预订应用程序，

app.js

，

Booked.js

（第一个孩子）和

Details.js

（第二个孩子）
我正在尝试访问

App.js

以使用第二个子项（

Detail.js

）删除数据，但无法继续，因为它会引发以下错误：

“TypeError:无法读取未定义的属性'state'”

每当我尝试向路由组件添加函数以访问

App.js

这是主页
当我单击Booked.js中的数据时，我会被重定向到Details.js以查看特定数据

使用此代码，带有组件的管线可以正常工作

<Route path="/details" component={Details} /> 

有人能帮忙解释一下为什么会这样吗？ 有什么解决方案或替代方案吗？

---

蒂亚

作为道具传递时，需要绑定此。此外，传递路由器的道具也是一个好主意：

<Route path="/details" component={ (routerProps) => <Details delBook={this.delBook.bind(this)} {...routerProps} />  } />

---

感谢您提到

routerProps

，它解决了我的问题，即如何将URL

/：id

中的变量参数传递给您要路由到的组件，同时也传递属性中的其他数据+1.

<Route path="/details" render={()=><Details delBook={this.delBook}/>}/> 

 <Link
  to={{
  pathname: "/details",
  state: {
  id: booking.id,
  fname: booking.fname,
  lname: booking.lname,
  email: booking.email,
  ddate: booking.ddate,
  ttime: booking.ttime
  }
  }}
  key={booking.id} 
  style={linkStyle}>

 state = {
    id: this.props.location.state.id,
    fname:  this.props.location.state.fname,
    lname:  this.props.location.state.lname,
    email: this.props.location.state.email,
    ddate: this.props.location.state.ddate,
    ttime: this.props.location.state.ttime,
}

<Route path="/details" component={ (routerProps) => <Details delBook={this.delBook.bind(this)} {...routerProps} />  } />

class Details extends React.Component {
  constructor(props) {  // Use constructor to initialise `this` properly
    super(props);

    this.state = {
      id: props.location.state.id,
      fname: props.location.state.fname,
      lname: props.location.state.lname,
      email: props.location.state.email,
      ddate: props.location.state.ddate,
      ttime: props.location.state.ttime
    };
  }
}