在 material ui 抽屉中呈现 Link

Question

我想将我的 react-router link 添加到 Drawer。我试过这个：

<Drawer width={200} open={this.state.drawerOpen} docked={false} onRequestChange={this.toggleDrawer}>
   <Link to="/businesspartners">
      <MenuItem onTouchTap={this.toggleDrawer.bind(this, false)}
                rightIcon={<CommunicationBusiness />}
      >
         Business Partners
      </MenuItem>
   </Link>
</Drawer>

我的问题是 link 会呈现下划线（如下图所示）。

Answer 1

对 link 使用内联样式 textDecoration: 'none'。 <Link> 被呈现为标准 <a> 标签，这就是我们可以在那里应用 textDecoration 规则的原因。

<Drawer width={200} open={this.state.drawerOpen} docked={false} onRequestChange={this.toggleDrawer}>
   <Link to="/businesspartners" style={{ textDecoration: 'none' }}>
      <MenuItem onTouchTap={this.toggleDrawer.bind(this, false)}
                rightIcon={<CommunicationBusiness />}
      >
         Business Partners
      </MenuItem>
   </Link>
</Drawer>

Answer 2

我对直接使用样式也有类似的担忧，并遇到了以下答案：

总而言之，使用 ListItem 上的组件属性：

<List>
   <ListItem button component={Link} to="https://www.google.com">
        <ListItemText primary="Google" />
   </ListItem>
</List>

官方文档在这里介绍：https://material-ui.com/api/list-item/

Answer 3

我遇到了同样的问题，但可能是因为这个问题，materialUI 的新更新不起作用， import from import Link from '@material-ui/core/Link';

有一些调整

所以它会起作用

     import Link from '@material-ui/core/Link';

     <List>
      <ListItem button component={Link} href="/dsda">
        <ListItemIcon>
          <DashboardIcon />
        </ListItemIcon>
        <ListItemText primary="DashBoard"/>
      </ListItem>
     </List>

在 material ui 抽屉中呈现 Link

Render Link in material ui Drawer

reactjs

react-router

material-ui