web-dev-qa-db-ja.com

Switch（react-router）を使用する場合は、上にスクロールします

あるページから別のページに移動するとき、ユーザーが自動的に一番上にスクロールされるようにしたいと思います。つまり、scrollTo(0, 0)です。

による react-routerスクロール復元に関するドキュメント 推奨されるアプローチは、コンポーネントScrollToTopをセットアップし、この中にルートをラップすることです。

これはうまく機能し、ユーザーはScrollToTopコンポーネント内にネストされたルートの一番上までスクロールされますが、コンポーネントがSwitchコンポーネント内に配置されている場合、Switchはそうではありません。もはやスイッチのように機能します。これは、最初のルートではなく、一致するすべてのルートをレンダリングすることを意味します。

または、ScrollToTopをSwitchの外側に配置しても、ユーザーが一番上にスクロールしなくなりました。

バージョン： react-router-v4

javascriptreactjsreact-routerreact-router-v4
8
Kevin Farrugia

スクロールについて具体的にはわかりませんが、リスナーをbrowserHistoryにアタッチできます。これは、これを行う簡単な方法かもしれません（onUpdateはv4では機能しないと思います）。

const browserHistory = createBrowserHistory();

browserHistory.listen((location, action) => {
  window.scrollTo(0, 0);
});

<Router history={browserHistory} />
9
Austin Greco

react-router-v4 scroll Restorationを使用し、ScrollToTopをSwitchの外に配置することで、これを解決することができました。また、withRouterを使用することを忘れないでください。そうしないと機能しません。

2
Kevin Farrugia

私がしたのと同じ問題がありました。が更新されるたびに、ユーザーはscrollTo(0,0)に移動します。

<Router onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}>
  ...
</Router

上記が機能しない場合：

Inreact-router-v4スクロール復元

これは、すべてのナビゲーションでウィンドウを上にスクロールするコンポーネントで処理するのは簡単です。ルーターの小道具にアクセスできるように、必ずルーターでラップしてください。

 componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0)
    }
  }

  render() {
    return this.props.children
  }
}

次に、アプリの上部、ルーターの下にレンダリングします

const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)

上記のコードはReact-Routerからコピーされています ウェブガイド

1
Aaqib