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

Question

我在 React 中有一个菜单组件，它利用了 Material-ui 列表组件，看起来像这样：

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的路线属性。我如何在 React 中做到这一点？

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

Answer 1

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

引用自 here