在反应中跳转到页面中的特定位置

Question

单击按钮时，我需要转到页面上的特定行。如何使用 react-router 来完成。我有：

<Grid xs={3}>    
  <Button>heading</Button>
  <Button>Heading2</Button>
</Grid>
<Grid xs={3}>    
  <h1>heading</h1>
  <p>Paragraph</p>
  <h2>Heading2</h2>
  <p>Paragraph2</p>
</Grid>

当点击标题按钮时，它应该跳转到第二个网格中的相关位置。怎么做。我也提到了How to use react-router to jump to specific location in the page。

Answer 1

将您的 Link 组件包装在 MUI Button 中，并为您的第二个网格定义一个 id 属性，例如 gridWrapper。

<Grid xs={3}>    
  <Button component={Link} to="#gridWrapper">heading</Button>
  <Button>Heading2</Button>
</Grid>
<Grid xs={3} id="gridWrapper">    
  <h1>heading</h1>
  <p>Paragraph</p>
  <h2>Heading2</h2>
  <p>Paragraph2</p>
</Grid>