Как прокрутить до определенного раздела страницы в реакции js

Question

Я использую реакцию для разработки веб-сайта. Я реализовал разделы страницы как разные классы и в своем файле приложения. js я импортировал эти классы, такие как <Header/>, <Section1/>, <Section2/> и <Footer/>, которые объединяются для создания веб-страницы. В моем заголовке есть кнопка, которую я хочу прокрутить вниз до раздела 2, начиная с нажатия. Как мне этого добиться? Если я создам прокручиваемую функцию в своем классе заголовка, она будет работать даже потому, что для заголовка другие разделы страницы не видны.

Вот класс моей домашней страницы, который состоит из различных разделов

class Home extends Component {
  render() {
    return (
      <div className="home-main-rect">
        <Section1 />
        <Section2 />
        <Section3 />
        <Section4 />
      </div>
    );
  }
}

Ниже приведено приложение. js file

function App() {
  return (
    <Router>
      <div className="App">
        <header className="App-header"></header>
        <div>
          <Heading />
          <Switch>
            <Route exact path="/" component={Home}></Route>
            <Route exact path="/contact" component={ContactUs}></Route>
            <Route exact path="/caseStudy" component={CaseStudy}></Route>
          </Switch>
          <Footer />
        </div>
      </div>
    </Router>
  );
}

Я решил добавить в приложение верхние и нижние колонтитулы. js так, как они должны отображаться на всех страницах.