"我想要在React上實現同一頁在menu上點擊，就滑到對應的區塊，該怎麼做呢?"
在React上面因為不建議直接操作DOM的關係
所以在能取得DOM資訊的狀況下
建議是使用ref

在這邊我的組件又拆分成

firstpage
|
|--nav
|--sec1
|--sec2
|--sec3
|--sec4
|--sec5

我的menu是放在nav上
但ref都分散在sec1~sec5的最頂層div
那我該怎麼取得ref呢?

首先得在父層firstpage先指定useRef給sec1~sec5

const sec1Ref=useRef();
const sec2Ref=useRef();
const sec3Ref=useRef();
const sec4Ref=useRef();
const sec5Ref=useRef();

並把secRef1~5撒到組件內

<Sec1 s1={sec1Ref}/>
<Sec2 s2={sec2Ref}/>
<Sec3 s3={sec3Ref}/>
<Sec4 s4={sec4Ref}/>
<Sec5 s5={sec5Ref}/>

接著在子層sec1~sec5接受props
以sec1代表

const ref1=props.s1; 
<div className='sec1' ref={ref1}></div>

在這邊子層sec1~5就設定完畢
接著回到父層firstpage設定要傳入nav的值

<Nav all={{sec1Ref,sec2Ref,sec3Ref,sec4Ref,sec5Ref}}/>

做到此處的話
在父層的設定也完畢了
最後只剩下子層nav的部分

nav的部分因為有5顆按鈕
每一顆都要順順的對應到sec1~5
於是在每顆按鈕的li都設定一個onClick函數
以要滑至sec1為例

<li onClick={handleScrollSec1}>sec1</li>

接著定義函數handleScrollSec1

const handleScrollSec1=()=>{
  const scrollRef1=props.all.sec1Ref.current.offsetTop;
  window.scrollTo({top:scrollRef1,behavior:'smooth'});
}

在這邊的scrollRef1為接受父組件傳下來的props
並且請記得要給ref一個current
而因為scrollTo這邊的top內需要給數字
所以才在最後面加了一個offsetTop定義div在視窗的距離
這樣子就能夠做出平順的滑行至指定的區塊