在 ListItem 按钮中设置路由器单击答案

【问题标题】：Set router in ListItem button click在 ListItem 按钮中设置路由器单击
【发布时间】：2019-09-07 05:56:19
【问题描述】：

我在List 中有以下一组ListItem。现在点击事件，我希望它路由到新的反应组件。怎么做？

<List>
    <ListItem button key= "Account">
        <ListItemIcon>{<MailIcon />}</ListItemIcon>
        <ListItemText primary= "Account" />
    </ListItem>

    <ListItem button key= "Student">
        <ListItemIcon>{<InboxIcon />}</ListItemIcon>
        <ListItemText primary= "Student" />
    </ListItem>
</List>

【问题讨论】：

标签： javascript reactjs routing material-design

【解决方案1】：

点击事件，我希望它路由到新的反应组件

您可以使用 history 属性。像这样：

onClick={ () => this.props.history.push("/your-page") }

你需要一个对应的Route：

<Route path="/your-page" component={YourComponent} />

【讨论】：

我正在使用这样的功能组件export default function MenuDrawer。在这种情况下会起作用吗？
那你没有this。所以试试props.history.push("/your-page")。不要忘记在函数签名中导入道具。像这样：function MenuDrawer(props) {//your code }@Lara
点击事件我收到TypeError: Cannot read property 'push' of undefined，为什么会这样？
@Lara 你可能需要用withRouter 包裹MenuDrawer。像这样：export default function withRouter(MenuDrawer)。不要忘记从react-router-dom 导入withRouter。
谢谢，你能不能给我一个小例子，我很新的反应，不能很好地理解它，一个小例子对我来说是一个好的开始..谢谢

【解决方案2】：

您可以从react-router-dom 使用Link，

<List>
  <Link to="/account">
    <ListItem button key= "Account">
      <ListItemIcon>{<MailIcon />}</ListItemIcon>
      <ListItemText primary= "Account" />
    </ListItem>
  </Link>

  <Link to="/student">
    <ListItem button key= "Student">
      <ListItemIcon>{<InboxIcon />}</ListItemIcon>
      <ListItemText primary= "Student" />
    </ListItem>
  </Link>
</List>

当然你需要Route来处理它们。

Demo

您可以了解更多关于路由here

【讨论】：

非常感谢 Ravi，你能帮我Route吗，我很新，需要一个起点。请帮助或指导我链接。谢谢
@Lara，查看演示，我已尝试使用 Route 创建一个简单的演示。
@Lara，你检查过演示吗？有用吗？

【解决方案3】：

来自 react-router-dom 的链接

<List component="nav">
      {orders.map(item =>
           <ListItem key={item.key} component={Link} button to={'/car/add/' + item.key} >
               <ListItemText primary={item.title} />
          </ListItem>
       )}
</List>

【讨论】：

迄今为止最干净的答案