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>

　　)

}