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 ルーターの設定と使用のコード例です。