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 路由配置和使用的代码示例。

umi 路由 案例

umi 路由案例