处理React和material-ui中菜单项列表的点击

Question

我在React中有一个菜单组件，它使用了材料-ui List组件，看起来像这样：

handleMenuItemClick() {
    // go to route defined in the ListItem
}

class MenuList extends React.Component {
    render() {
        return (
            <div>
                <List
                    onClick={this.handleMenuItemClick}
                >
                    <ListItem button route="/dashboard">
                        <DashboardIcon /> <ListItemText primary="Dashboard" />
                    </ListItem>
                    <ListItem button route="/investments">
                        <InvestmentsIcon /> <ListItemText primary="My investments" />
                    </ListItem>
                </List>
            </div>
        );
    }
}

我想要做的是去不同的路由定义ListItem的route属性。我如何在React中执行此操作？

我不希望每个菜单项都有单独的点击处理程序。

Answer 1

import {Link} from 'react-router-dom'
                       <ListItem
                            component={Link}
                            to="/"
                            button >

引自here