[React] How to scroll to a component in a home page from a link in navbar

I have a single landing page. I want to scroll section of the page clicking on navbar. Generally, it is done with id hyperlink in the navbar for the section with pure HTML CSS. However in this case sections of the home page are components.

App.js

      <Navbar />
      <Switch>
        <Route exact path="/" render={props => (
          <React.Fragment>
            <MainScreen />
            <AboutMain />
            <Service />
            <Product />
            <AboutUs />
            <Team />
            <Director />
            <ContactUsMain />
          </React.Fragment>
        )} />

Links are in navbar component

            <Navbar light expand="md">
                <NavbarBrand href="/">Logo</NavbarBrand>
                <NavbarToggler onClick={this.toggle} />
                <Collapse isOpen={this.state.isOpen} navbar>
                    <Nav className="ml-auto" navbar>
                        <NavItem style={navbarItemDesign}>
                            <NavLink href="/components/">Home</NavLink>
                        </NavItem>
                        <NavItem style={navbarItemDesign}>
                            <NavLink href="/">Company</NavLink>
                        </NavItem>
                        <NavItem style={navbarItemDesign}>
                            <NavLink href="/">About</NavLink>
                        </NavItem>
                        <NavItem style={navbarItemDesign}>
                            <NavLink href="/">Achievers</NavLink>
                        </NavItem>
                        <NavItem style={navbarItemDesign}>
                            <NavLink href="/">Contact Us</NavLink>
                        </NavItem>
                        <NavItem style={navbarItemDesign}>
                            <NavLink href="/" onClick={this.windowLocation}>Distributer Login</NavLink>
                        </NavItem>
                        <NavItem style={navbarItemDesign}>
                            <Link to="/cart"><Button style={cartBtn} color="primary" >Your Cart</Button></Link>
                        </NavItem>
                    </Nav>
                </Collapse>
            </Navbar>

I want like this. Clicking on “About” on navbar it scroll down to “AboutMain” component in home page.

I don’t know what you are using React Router for, so it may interfere,

but

you can just use the classic html method.
If each section has a unique id you are still able to reach it with #sectionID

Its turns out I was to able to solve the problem using the react-scroll.
Solution Stackoverflow