Reactで画面遷移時にスクロール位置がページの最上部にならない問題
2021年4月18日
Reactのreact-router-domで画面遷移時にスクロール位置がページの最上部から表示されない問題
どうも。
26歳でフリーランス英語・スペイン語通訳からWeb系エンジニアに転職してエンジニア歴5年。
普段はフルスタックエンジニアしてます、テック備忘LOGのYuki（@tech_bibo_log）です！！
今回はReactについての備忘録になります。
Reactでreact-router-domを使って画面遷移をしたときに、前の画面のスクロール位置のまま画面遷移されてしまい、
結果、変な位置から表示されてしまう問題の対処方法を備忘録として残します。
react-routerの公式ドキュメントに解決策が載ってました。
SPA特有の問題なのかなあ？検索したらすぐに出てくるので、Reactではよくある問題なんだと思います。
Vueでも起きる問題なのかはわかりませんが、簡単に紹介したいと思います！
Yuki
この記事ではこんな人にオススメです。
- Reactを勉強中の人
- 画面遷移時のスクロール位置が変で困ってる人
解決策の手順は次の通りです。
手順の説明
- スクロールトップ用のコンポーネントを作る
- 作成しコンポーネントでラップする
以上です！
めちゃくちゃ簡単でした。それでは早速始めましょう！
▽▽▽ おすすめ：Djangoでブログを構築した時のお話し ▽▽▽
▽▽▽ おすすめ：Twitter Botを作成した時のお話し ▽▽▽
[ 目次 (開く) ]
スクロールトップするためのコンポーネントを作成
以下の内容をコピペして保存します。
import { Component } from 'react';
import { withRouter } from 'react-router-dom';
class ScrollToTop extends Component {
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
window.scrollTo(0, 0);
}
}
render() {
return this.props.children;
}
}
export default withRouter(ScrollToTop);
作成したコンポーネントでラップする
先ほど作成したコンポーネントScrollToTopをApp.jsなどのでインポートして、
以下の内容をコピペして保存します。
import './App.css';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Header from './components/header/Header.component';
import Footer from './components/footer/Footer.component';
import Homepage from './pages/homepage/Homepage.component';
import ShopPage from './pages/shop/ShopPage.component';
import ContactPage from './components/snippets/utils/ContactPage';
import ScrollToTop from './components/snippets/utils/ScrollToTop';
function App() {
return (
<BrowserRouter>
<ScrollToTop>
<Header />
<Switch className="wrap">
<Route exact path='/' component={Homepage}/>
<Route path='/shop' component={ShopPage}/>
<Route path='/contact' component={ContactPage}/>
</Switch/>
<Footer />
</ScrollToTop/>
</BrowserRouter/>
);
}
export default App;
Yuki
以上で解決できてしまいました！！
まとめ
今回はReactのreact-routerなどで画面遷移をした際に、スクロール位置が前のページのままに遷移されるため変な位置から表示されてしまう問題の解決方法を備忘録としてご紹介しました。
使いまわしがきくので覚えておきたいですね！！
以上です、最後まで読んで頂きありがとうございました！
