【React】【react-router-dom】環境構築

はじめに

この記事は【react-router-dom】の導入方法の備忘録である。

react-router-dom公式ドキュメント

【react-router-dom】とは

react-router-domは、React用のサードパーティ製ルーティングライブラリで、シングルページアプリケーション(SPA)のページ遷移をページのリロードなしに実現できる便利なツール

導入方法

1. インストール

以下コマンドを実行する。

npm install react-router-dom

2. 利用方法

以下にサンプルプログラムを記述する。

【Outlet】コンポーネントを利用して、ルーティングされた子コンポーネントをレンダリングする。
具体的に親ルートコンポーネント内で子ルートコンポーネントを表示する場所を指定する。

// Layout.tsx
import { SnackbarProvider } from '@common/utils/SnackbarProvider';
import { Typography } from '@ui/ui-index';
import { memo } from 'react';
import { Outlet } from 'react-router-dom';

/**
 * Layoutコンポーネント
 */
const Layout = memo(() => {
  return (
    <SnackbarProvider>
      <Outlet />
      <Typography>レイアウトです！</Typography>
    </SnackbarProvider>
  );
});

export default Layout;

【createBrowseRouter】の引数には配列の中にオブジェクトを記述することで【Browser Router】を作成してルーティングを設定する。作成した【router】は【RooterProvider】の【router props】に設定する。”/”にアクセスした場合に【Layout】コンポーネントが表示されることになる。

// App.tsx
import { Routing } from '@/app/routes/Routing';
import {
  createBrowserRouter,
  RouteObject,
  RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter(Routing as RouteObject[]);

const App = () => {
  return <RouterProvider router={router} />;
};

export default App;

// Routing.tsx
export const Routing: RoutingType[] = [
  {
    // ログインページのルート
    path: 'login',
    id: 'login',
    label: 'login',
    element: <Login />,
    // TODO: エラーページの設定が未定
    errorElement: (
      <>
        <Layout />
      </>
    ),
  },
  {
    // アプリケーションのメインレイアウトのルート
    path: '/',
    id: 'layout',
    element: <Layout />,
    errorElement: (
      <>
        <Layout />
      </>
    ),
    children: [],
  },
];