umi ルーティングの例

以下は、umi ルーティングのヒントとサンプルコードであり、umi ルーティングとアプリケーションの理解をサポートすることを願っています。

umi のルーティング設定ファイル：

umi のルーティング設定ファイルは通常、src/config ディレクトリに配置され、router.js または router.config.js という名前で保存されます。以下は router.config.js のサンプルコードです：

export default [
  {
    path: '/',
    component: '@/layouts/index',
    routes: [
      {
        path: '/',
        redirect: '/home',
      },
      {
        path: '/home',
        component: '@/pages/Home',
        title: 'ホームページ',
        routes: [
          {
            path: '/home/:id',
            component: '@/pages/Detail',
            title: '詳細ページ',
          },
        ],
      },
      {
        path: '/about',
        component: '@/pages/About',
        title: '紹介ページ',
      },
      {
        component: '@/pages/NotFound',
      },
    ],
  },
];

ルーティング設定の説明：

path：ルートのパスを表します。相対パスまたは絶対パスを指定できます。
component：現在のルートで使用されるページコンポーネントのパスを表します。
routes：このルートに含まれるサブルートを表します。
redirect：このルートを別のルートにリダイレクトします。
title：このルートのページタイトルを表します（オプション）。

ルーティングの使用方法：

コンポーネント内では、umi の useHistory、useLocation、または useParams フックを使用してルーティング情報にアクセスできます。以下はいくつかの簡単な使用例です：

import { useHistory, useLocation, useParams } from 'umi';

export default function MyComponent() {
  const history = useHistory();
  const location = useLocation();
  const params = useParams();

  function handleClick() {
    history.push('/home');
  }

  return (
    <div>
      <p>現在の場所：{location.pathname}</p>
      <p>パラメータ：{params.id}</p>
      <button onClick={handleClick}>ホームに移動</button>
    </div>
  );
}

以上が基本的な umi ルーティングの設定と使用のコード例です。