ReactRouterHashLink 不能很好地与材质 UI 抽屉配合使用

Question

我正在使用包 material-ui、react-router 和 react-router-hash-link。我想要一个材质 UI 抽屉（沿着一个应用栏）具有滚动到页面中特定主体的哈希链接，但是每当我这样做时，滚动就会发生，但是当我关闭抽屉时，它会将滚动条恢复到顶部页面。

Answer 1

我希望您找到了解决方案，对于遇到这里的任何人，这里有一个解决方案：

抽屉应导航后关闭。因此，如果您在 onClick 处理程序上更新抽屉状态，它将按预期工作。

<Drawer
  onClose={this.handleToggleDrawer}
  anchor={"right"}
  open={this.state.openDrawer}
>
  <List>
    {links.map(({ text, to, icon }) => (
      <ListItem
        onClick={this.handleToggleDrawer}
        activeClassName={"Mui-selected"}
        to={to}
        button
        key={to}
      >
        <ListItemIcon>{icon}</ListItemIcon>
        <ListItemText primary={text} />
      </ListItem>
    ))}
  </List>
</Drawer>

handleToggleDrawer = () => {
  const { openDrawer } = this.state;
  this.setState({ openDrawer: !openDrawer });
}