React Routerについて

React Routerとは

複数のページで構成されたReactアプリケーションをルーティングするライブラリです。React Routerを使用することで、ページの遷移に伴うコンポーネントのレンダリングやURLパラメータの受け渡しが簡単になります。

URLにアクセスした際に、どのコンポーネントを表示させるのかといったルーティングの設定をReact Routerを利用して行います。

ユースケース

SPAでのページ遷移のために使用されます。ログインページやユーザ登録ページなど複数のページが必要なアプリケーションをReact Routerを使用することで、ユーザーがアプリケーション内でページを遷移した際に、画面の再描画を行わずに、必要なコンポーネントだけをレンダリングすることができます。また、URLパラメータの取得や操作が容易になります。

通常はページを移動する度に全体のリロードが必要になります。しかし、React Routerを利用した場合はページ移動の際に、最初にアクセスした時にダウンロードしたJavaScriptを使って更新が必要な場所のみ更新し、データが必要な場合はfetch関数やaxiosライブラリを利用してサーバからデータの取得を行い描写します。

React Routerの使用

まずreact-router-domパッケージをインストールします。

$ npm i react-router-dom -D
$ npm i @types/react-router-dom -D

以下、ドキュメントより。

App.tsx

// Configure nested routes with JSX
createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Root />}>
      <Route path="contact" element={<Contact />} />
      <Route
        path="dashboard"
        element={<Dashboard />}
        loader={({ request }) =>
          fetch("/api/dashboard.json", {
            signal: request.signal,
          })
        }
      />
      <Route element={<AuthLayout />}>
        <Route
          path="login"
          element={<Login />}
          loader={redirectIfUser}
        />
        <Route path="logout" />
      </Route>
    </Route>
  )
);

<Route path="dashboard" element={<Dashboard />} loader={({ request }) => fetch("/api/dashboard.json", {signal: request.signal})} />

ルートが /dashboard であることを示しています。loaderは、このルートが表示される前に非同期にデータを取得するための関数を定義します。fetchメソッドにて、非同期で外部のリソースを取得しています。

<Route element={<AuthLayout />}>

認証が必要なすべてのルートをラップするためのものです。

<Route path="login" element={<Login />} loader={redirectIfUser} />

最後に、2行目で作成したルートをcreateBrowserRouterに渡してルーターオブジェクトを作成しています。