☰

react-router 遷移ごとに一番上にスクロールする 質問する

tag-icon • tag-icon javascript reactjs react-router react-router-redux
react-router 遷移ごとに一番上にスクロールする 質問する

別のページに移動すると、その位置が前のページと同じままになるという問題が発生します。そのため、自動的に一番上にスクロールしません。ルーターwindow.scrollTo(0, 0)でも使用してみましたonChange。この問題を修正するためにも使用しましたscrollBehaviorが、うまくいきませんでした。これについて何か提案はありますか?

ベストアンサー1

でも授業は2018年っぽい

React Hooks を使用した ScrollToTop の実装

スクロールトップへ

import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return (null);
}

export default withRouter(ScrollToTop);

使用法：

<Router>
  <Fragment>
    <ScrollToTop />
    <Switch>
        <Route path="/" exact component={Home} />
    </Switch>
  </Fragment>
</Router>

ScrollToTop はラッパー コンポーネントとして実装することもできます。

スクロールトップへ

import React, { useEffect, Fragment } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history, children }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return <Fragment>{children}</Fragment>;
}

export default withRouter(ScrollToTop);

使用法：

<Router>
  <ScrollToTop>
    <Switch>
        <Route path="/" exact component={Home} />
    </Switch>
  </ScrollToTop>
</Router>

おすすめ記事