🌀

React Routerのページ遷移でスクロール位置をリセットする

2022/12/05に公開

React

React Router

tech

前置き

SPAではページ遷移でスクロール位置がリセットされません。
React Router v6.4.4では新たに<ScrollRestoration />が追加され、このページ遷移にともなうスクロール位置の制御を簡単に行うことができるようになりました。

`<ScrollRestoration />`の使い方

まずはReact Router v6.4.4をインストールします。

npm i react-router-dom@6.4.4

次にルーターの設定を行います。従来の<BrowserRouter>による設定ではなく、こちらもv6.4で新たに追加されたデータAPIをサポートするルーター設定を使用するようにしてください。

createBrowserRouter（公式推奨）
createMemoryRouter
createHashRouter

通常はcreateBrowserRouterを使用します。

import { createBrowserRouter, RouterProvider, ScrollRestoration } from 'react-router-dom';
import ReactDOM from 'react-dom/client';

const Layout = () => {
  return (
    <div>
      {/* ... */}
      <ScrollRestoration />
    </div>
  );
};

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      { index: true, element: <Home /> },
      { path: '/path-to-page/', element: <Page /> },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

以上でページ遷移にともないスクロール位置がリセットされるようになります。

デモ

要点

アプリケーションのRoot Routeに<ScrollRestoration />を配置する。（公式推奨）
ルーターの設定には<BrowserRouter>ではなくcreateBrowserRouterを使用する。

GitHubで編集を提案

前置き

<ScrollRestoration />の使い方

デモ

要点

Discussion

`<ScrollRestoration />`の使い方