How do I Scroll to a certain section of the page in react js

Question

I'm using react to develop a website. I've implemented sections of the page as different classes and in my App.js file I have imported these classes such as <Header/>, <Section1/>, <Section2/> and <Footer/> which aggregate to make the web page. My header has a button which I want to scroll down to section 2 starting when pressed. How do I achieve this? If I create a scrollable function in my Header class, will it even work since to the Header other sections of the page are not visible.

Here is my Home page class which is made up of different sections

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

Below is the App.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>
  );
}

I chose to add headers and footers in app.js as they are to appear in all pages.