ReactJS中如何点击导航栏移动到对应的组件？

Question

我使用 React 类组件，react-router-dom v5.

• 这是我的 Homepage.js 文件，你可以在这里看到一些组件：

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

• 这是 HomeHeader 组件：

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

• 如何在 HomeHeader 中单击医生标签时自动滚动到 Doctor 组件？非常感谢！

• 如何在 HomeHeader 中单击医生标签时自动滚动到 Doctor 组件？非常感谢！