react hook 頁面跳轉路由置頂

路由切換后，頁面scroll 會定位在切換之前的位置，而非當前頁的頂部，而希望回到頂部，則可以在當前頁設置 window.scrollTo(0,0);則可以回到頁面頂部，但是只是一個頁面，如果每個頁面都這樣的話，又感到代碼冗余，故，可以寫個scroll組件，嵌套在路由切換的根組件下。代碼如下。

scrollToTop.js

import {useEffect} from 'react';

import {useLocation} from 'react-router-dom';

const ScrollToTop = props =>{

　　const {pathname} = useLocation();

　　useEfect(()=>{

　　　　window.scrollTo(0,0)

　　},[pathname]);

　　return props.children;

}

export default ScrollToTop;

注： 我項目使用的是react-router-dom，也可以使用react-router，但是version必須是5.1以上，否則useLocation無法使用。

App.js

import ScrollToTop from './scrollToTop';

export default function App(){

　　return(

　　　<div>

　　　　<ScrollToTop>

　　　　　　　　<Switch>

　　　　　　　　　<Route/>　　

　　　　　　　　</Switch>

　　　　</ScrollToTop>

　　 <div>

　　)

}