无法 Link 使用 MUI 5 抽屉访问部分页面

Question

当用户点击导航抽屉中的 Shop 按钮时，我只是想 link 到第一页的特定部分，但它没有什么都不做:

这是 MUI 5 抽屉组件的代码：

    <Drawer
      anchor="left"
      open={open}
      onClose={() => setOpen(false)}
      PaperProps={{
        sx: {
          background: "linear-gradient(to top, #9C685B44, #9C685Bff)",
        },
      }}
    >
      <IconButton onClick={() => setOpen(false)}>
        <ChevronLeftIcon sx={{ color: "white" }} />
      </IconButton>
      <Divider />
      <List>
/////////////////////////////////
        <ListItem>
          <Button
            // Linking to Products Section
            href="#products"
            startIcon={<PhoneAndroidIcon />}
            sx={{
              color: "white",
              fontFamily: "Montserrat",
            }}
          >
            Shop
          </Button>
        </ListItem>
//////////////////////////////
        <ListItem>
          <Badge color="error" badgeContent={badgeNumber}>
            <Button
              startIcon={<ShoppingCartIcon />}
              sx={{
                color: "white",
                fontFamily: "Montserrat",
              }}
            >
              Cart
            </Button>
          </Badge>
        </ListItem>
      </List>
    </Drawer>

并且在相应的部分中，我向容器添加了一个包含产品值的 ID：

<Container maxWidth="xl" id="products">
   ...
</Container>

即使使用锚标记也会导致同样的问题。

有办法解决这个问题吗？

Answer 1

您可以使用 scrollIntoView and History.pushState() 来处理这个问题。从 Button 组件中删除 href，而是使用其 onClick 方法调用以下内容：

// id is your section names (e.g. 'products')
// url is optional, and if not specified, is set to the document's current URL

const onNavClick = (event, id, url) =>
{
    let element = document.getElementById(id)
    event.preventDefault()
    element.scrollIntoView()
    window.history.pushState(id, id, url)
}

您可以将各种其他选项传递给 scrollIntoView，您可以按照上面的 link 找到有关可用选项的更多信息。

无法 Link 使用 MUI 5 抽屉访问部分页面

Cannot Link to part of page with MUI 5 Drawer

html

javascript

css

reactjs

material-ui