Jumping to specific location in a page in react

Question

I need to go to a specific line on page, when clicking on a button. How can it be done using react-router.I have :

<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>

When clicking on heading button, it should jump to the relevant place in 2nd grid. How it can be done. I referred, How to use react-router to jump to specific location in the page as well.

Answer 1

Wrap your Link component in MUI Button and define an id attribute for your second grid,say 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>