How to click to navbar and move to the corresponding component in ReactJS?

I use React class components, react-router-dom v5.

• This is my Homepage.js file, you can see some components here:

<div>
                <HomeHeader
                    isShowBanner={true} />
                <Specialty
                    settings={settings} />
                <MedicalFacility
                    settings={settings} />
                <OutStandingDoctor
                    settings={settings} />
                <HandBook
                    settings={settings} />
                <About />
                <HomeFooter />
           </div>`

• This is HomeHeader component:

<React.Fragment>
                <div className='home-header-container'>
                    <div className='home-header-content'>
                        <div className='left-content'>
                            <i className='fas fa-bars'></i>
                            <img src={logo1} className='header-logo' alt=''
                                onClick={() => this.returnToHomePage()}
                            ></img>
                        </div>
                        <div className='center-content'>
                            <div className='child-content'>
                                <div>
                                    <b>
                                        <FormattedMessage id='homeheader.speciality' />
                                    </b>
                                </div>
                                <div className='subs-title'>                    <FormattedMessageid='homeheader.searchdoctor' />
</div>
                            </div>
                            <div className='child-content'>
                                <div>
                                    <b>
                                        <FormattedMessage id='homeheader.health-facility' />
                                    </b>
                                </div>
                                <div className='subs-title'><FormattedMessage id='homeheader.select-room' /></div>
                            </div>
                            <div className='child-content'>
                                <div>
                                    <b>
                                        <FormattedMessage id='homeheader.doctor1' />
                                    </b>
                                </div>
                                <div className='subs-title'><FormattedMessage id='homeheader.select-doctor' /></div>
                            </div>
                            <div className='child-content'>
                                <div>
                                    <b>
                                        <FormattedMessage id='homeheader.handbook' />
                                    </b>
                                </div>
                                <div className='subs-title'><FormattedMessage id='homeheader.handbook-des' /></div>
                            </div>
                            <div className='child-content'>
                                <div>
                                    <b>
                                        <FormattedMessage id='homeheader.medical-package' />
                                    </b>
                                </div>
                                <div className='subs-title'><FormattedMessage id='homeheader.generalHC' /></div>
                            </div>
                        </div>
                        <div className='right-content'>
                            <div className='support' onClick={() => this.handleViewSupportPage()}>
                                <i className='fa fa-question-circle'></i>
                                <FormattedMessage id='homeheader.support' />
                            </div>
                            <div className='flag'>
                                <div className={language === LANGUAGES.VI ? 'language-vi active' : 'language-vi'}><span onClick={() => this.changeLanguage(LANGUAGES.VI)}>VN</span></div>
                                <div className={language === LANGUAGES.EN ? 'language-en active' : 'language-en'}><span onClick={() => this.changeLanguage(LANGUAGES.EN)}>EN</span></div>
                            </div>
                        </div>
                    </div>
                </div>

• How can I automatically scroll to Doctor component when I click on doctor label in HomeHeader? Thank you very much!

• How can I automatically scroll to Doctor component when I click on doctor label in HomeHeader? Thank you very much!

How can I automatically scroll to Doctor component when I click on doctor label in HomeHeader?

You can use anchors : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_an_element_on_the_same_page

You need to add id to your component. Anchors work if you specifify the id of the component ex:

http://localhost:3000/#myid

You can use animations to make a smooth scroll effect.