カテゴリー別アーカイブ: react-router

【react-router v4 / history/BrowserRouter】ぺージ遷移の度にscrollTo(0,0)したい

SPAで遷移するページにて、
遷移元のリンクの位置がそのまま遷移先の「始まり位置」になってしまい。どのように対処すればいいか探していましたが、
なかなか見つからなかったのでこちらに書いておきます。

 

const App = () => {
  return (
    <BrowserRouter>
      <Route component={ScrollToTop} />
          ネストされた<Switch>, とか <Route>達。。
    </BrowserRouter>
  );
}

const ScrollToTop = () => {
  window.scrollTo(0, 0);
  return null;
};

このように

関数をトップレベルのRouteに渡してやることで、

その下でネストするRoute達がその挙動をとります。

めでたしめでたし