🐨

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

2022/12/05に公開約1,300字

まえおき

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

<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>
);

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

デモ

https://stackblitz.com/github/remix-run/react-router/tree/main/examples/scroll-restoration?file=src%2Fapp.tsx

要点

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

Discussion

ログインするとコメントできます