一、Umi路由的概念

在 Umi 中，你可以在 .umirc.ts 文件中使用 routes 属性来配置路由。routes 属性是一个数组，每个元素都表示一个路由对象。每个路由对象都包含以下属性：

• path：表示路由路径，可以是字符串或正则表达式。

• component：表示路由组件的路径，可以是字符串或函数。

• routes：表示当前路由的子路由，也是一个路由数组。

二、定义路由表

 .umirc.ts 文件内容如下：

import { defineConfig } from "umi";

export default defineConfig({
  routes: [
    { 
      path: "/",
      component: "Home/index" 
    },
    { 
      path: "/Home2",
      component: "@/pages/Home2/index",
      // 嵌套路由
      routes: [
        {
          path: "/Home2/one",
          component: "@/pages/Home2/one/index"
        },
        {
          path: "/Home2/two",
          component: "@/pages/Home2/two/index"
        },
      ]
    },
  ],
  npmClient: 'npm',
});

三、在页面上引用

在 Umi 中，你可以使用以下方式在页面中引用路由组件：

1. 使用 Link 组件来创建链接。

Link 组件可以用于创建内部链接，layouts / index.tsx 代码如下：

import { Link, Outlet } from 'umi';
import styles from './index.less';

export default function Layout() {
  return (
    <div className={styles.navs}>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/Home2">Home2</Link>
        </li>
      </ul>
      <Outlet />
    </div>
  );
}

嵌套路由的用法也差不多，Home2 /  index.tsx 代码如下：

import { Link, Outlet } from "umi";

export default function HomePage() {
  return (
    <div className="homebox">
      <div>
        <Link to="/Home2/one">one</Link>
        <Link to="/Home2/two">two</Link>
      </div>
      <div>
        <Outlet />
      </div>
    </div>
  );
}

2. 使用 history 对象来进行编程式导航。

history 对象可以用于在代码中进行导航，例如：

import { history } from 'umi';

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

  return (
    <div>
      <button onClick={handleClick}>Go to Users</button>
    </div>
  );
}

3. 在页面中使用 Route 组件来渲染路由组件。

Route 组件可以用于在页面中渲染路由组件，例如：

import { Route } from 'umi';

function MyComponent() {
  return (
    <div>
      <Route path="/users" component={Users} />
    </div>
  );
}

function Users() {
  return <div>Users Page</div>;
}

需要注意的是，在使用 Route 组件时，需要将路由组件作为 component 属性的值传递给 Route 组件。此外，还需要在路由组件中添加 export default 来导出组件。

四、带参数的路由

4.1、路由表如下配置：

export default {
  routes: [
    {
      path: '/',
      component: '@/pages/index',
    },
    {
      path: '/users',
      component: '@/pages/users/index',
      routes: [
        {
          path: '/users/:id',
          component: '@/pages/users/[id]',
        },
      ],
    },
  ],
};

在上述代码中，我们定义了两个路由，一个是根路由 '/'，另一个是 /users 路由。在 /users 路由下，我们定义了一个子路由 /users/:id，其中 :id 表示动态路由参数。

4.2、在页面上引用：

对于路由组件的引入，我们可以使用相对路径或绝对路径，例如：

• 相对路径：'./users/index'，表示在当前目录下的 users/index.js 文件中定义路由组件。
• 绝对路径：'@/pages/users/index'，表示在项目根目录下的 src/pages/users/index.js 文件中定义路由组件。

使用动态路由参数时，需要将路由组件使用方括号包裹起来，例如：

• '/users/:id'：表示动态路由参数为 id。
• '@/pages/users/[id]'：表示路由组件为 src/pages/users/[id].js。

4.2.1、方法一：在 Link 组件中使用动态路由参数。

例如，你可以在页面中使用 Link 组件来创建一个带参数的链接：

import { Link } from 'umi';

function MyComponent() {
  const userId = 123;

  return (
    <div>
      <Link to={`/users/${userId}`}>User Profile</Link>
    </div>
  );
}

在上述代码中，我们将动态路由参数 userId 插入到链接中，以创建一个带参数的链接。

4.2.2、方法二：使用 history 对象来进行编程式导航。

例如，你可以在页面中使用 history.push 方法来进行编程式导航：

import { history } from 'umi';

function MyComponent() {
  const userId = 123;

  function handleClick() {
    history.push(`/users/${userId}`);
  }

  return (
    <div>
      <button onClick={handleClick}>User Profile</button>
    </div>
  );
}

在上述代码中，我们使用 history.push 方法来进行编程式导航，并将动态路由参数 userId 插入到路径中。

4.2.3、方法三：在页面中使用 Route 组件来渲染路由组件。

例如，你可以在页面中使用 Route 组件来渲染带参数的路由组件：

import { Route } from 'umi';

function MyComponent() {
  return (
    <div>
      <Route path="/users/:id" component={UserProfile} />
    </div>
  );
}

function UserProfile(props) {
  const userId = props.match.params.id;

  return <div>User Profile for {userId}</div>;
}

在上述代码中，我们使用 Route 组件来渲染带参数的路由组件，并在组件中通过 props.match.params.id 获取动态路由参数的值。

需要注意的是，在使用带参数的路由时，需要在路由配置中将动态路由参数使用冒号 : 来表示，例如 /users/:id。此外，在路由组件中获取动态路由参数的值时，可以使用 props.match.params 对象来获取参数的值。