サイト名変更・お引越しのお知らせ

React Router v6の基本的な使い方を学習する

React Router バージョン6系の基本的な使い方を学習する方法を解説します。

モグモグさん

キャッチアップや公式チュートリアルの補足などにぜひ利用してください。

バージョン
  • react 18.2.0
  • react-router-dom 6.6.1

v6.4からの変更点

React Router v6.4からマイナーアップデートとはいえ割と大きな変更がありました。

https://remix.run/blog/react-router-v6.4

  • Data Loading
  • Data API
  • Data Mutations
  • Data Revalidation

今まではルーティング機能を提供していましたが、それに加えてデータの読み書きをライブラリ内でできるようにしたという感じです。

モグモグさん

破壊的な変更はないので、追加された機能群を使わなくても今まで通りReact Routerを使用できます。

ルーティング

v6.4からのData APIを使用するには、createBrowserRouterなどの新しいコンポーネントを使用します。

公式ドキュメント

Before

<BrowserRouter>
  <Routes>
    <Route index element={<Top />} />
    <Route path="page1" element={<Page1 />} />
  </Routes>
</BrowserRouter>

After

createBrowserRouter([
  { path: "/", element: <Top /> },
  { path: "page1", element: <Page1 /> },
]);

JSXの形でも可能

createRoutesFromElementsを使ってJSXの形で定義することも可能です。

機能的な違いはありません。

createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />} errorElement={<ErrorPage />}>
      <Route index element={<Top />} />
      <Route path="page1" element={<Page1 />} />
    </Route>
  )
);

モグモグさん

こちらの記事でエラーハンドリングなんかも含めて基本的なルーティングについて解説しています。

【React Router v6系】React Routerを導入し基本的なページ遷移を行う方法を解説

Data Loading (loader)

Routeにloaderというpropsが追加されました。

loaderに関数を渡すことで、ページ表示前にデータを取得するようなことができます。

Before

export const SomePage: FC = () => {
  useEffect(() => {
    fetchSomething();
  }, []);
};

After

// サンプルデータを返す関数
const loader = async () => {
  return await fetchSomething();
};

export const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    errorElement: <ErrorPage />,
    children: [{ index: true, element: <SomePage />, loader: loader }],
  },
]);

Routeで指定したページで取得

loaderで返したデータはuseLoaderDataを使うことで、loaderで返したデータが取得できます。

export const SomePage: FC = () => {
  const data = useLoaderData();
  console.log("data", data);
};

モグモグさん

こちらの記事でloaderの基本について解説しています。

【React Router v6系】React Routerのloaderの基本を解説

Data Mutations & Data Revalidation

Routeにactionというpropsが追加されました。

ページ内のFormがsubmitしたデータを受け取って処理を行うことができます。

処理をactionが実行された後に、loaderが実行されるのでRevalidateされデータが同期されます。

actionの例

const loader = async () => {
  return await fetchSomething();
};

const action = async ({ request }: ActionFunctionArgs) => {
  const formData = await request.formData();
  await createSomething(formData);
  return redirect("/");
};

export const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    errorElement: <ErrorPage />,
    children: [{ index: true, element: <SomePage />, loader: loader, action: action }],
  },
]);

Routeで指定したページからFormを使ってPOST

<Form method="post" id="contact-form">
  <input
    placeholder="title"
    aria-label="title"
    type="text"
    name="title"
  />
  <button type="submit">Save</button>
</Form>

モグモグさん

こちらの記事でactionの基本について解説しています。

【React Router v6系】React Routerのactionの基本を解説

その他

  • Pending Navigation
    • useNavigationでページ遷移や通信のステータスが取得できるのでローディングやdisableなどUIと連動できます。
  • ScrollRestoration
    • ページ遷移時のスクロール位置の設定が可能です。

モグモグさん

いくつかよく使う機能の解説もしているのでチェックしてみてください。

【React Router v6系】React RouterでURLのクエリを取得する方法を解説

【React Router v6系】React RouterでDynamic Routingを実装する方法を解説

まとめ

React Router バージョン6系の基本的な使い方を学習する方法を解説しました。

モグモグさん

キャッチアップや公式チュートリアルの補足などにぜひ利用してください。