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: 'Home Page',
        routes: [
          {
            path: '/home/:id',
            component: '@/pages/Detail',
            title: 'Detail Page',
          },
        ],
      },
      {
        path: '/about',
        component: '@/pages/About',
        title: 'About Page',
      },
      {
        component: '@/pages/NotFound',
      },
    ],
  },
];

路由配置的說明：

path：表示路由的路徑，可以是相對路徑或絕對路徑。
component：表示當前路由所使用的頁面元件的路徑。
routes：表示該路由下包含的子路由。
redirect：表示將該路由重新導向到另一個路由。
title：表示該路由頁面的標題（可選）。

使用路由：

在元件內部，您可以通過 umi 的 useHistory、useLocation 或 useParams hooks 來訪問路由資訊。以下是一些簡單的使用示例：

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>Current location: {location.pathname}</p>
      <p>Params: {params.id}</p>
      <button onClick={handleClick}>Go Home</button>
    </div>
  );
}

以上是基本的 umi 路由配置和使用的程式碼示例。