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

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

モグモグさん

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

バージョン

react 18.2.0
react-router-dom 6.6.1

v6.4からの変更点
ルーティング
Data Loading (loader)
Data Mutations & Data Revalidation
その他
まとめ

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の基本を解説