配置式路由

Umi.js 不仅支持约定式路由，还允许通过配置文件来定义路由规则。这种方式提供了更大的灵活性，适用于需要更复杂的路由逻辑或与现有系统集成的场景。通过配置式路由，你可以明确地指定每个页面组件对应的 URL 路径、布局、重定向等信息。

配置式路由的基本概念

在 Umi.js 中，配置式路由是通过 .umirc.js 或 config/config.js 文件中的 routes 字段来定义的。这个字段接收一个数组，数组中的每个元素代表一条路由规则。每条规则可以包含以下属性：

path：字符串，表示该路由匹配的路径。
component：字符串或函数，指定渲染的 React 组件。如果是字符串，则会被解析为相对于 src/pages 的相对路径（例如 'home' 会指向 src/pages/home.jsx）；也可以是一个动态加载组件的函数。
redirect：字符串，用于设置重定向目标路径。
routes：数组，用于定义嵌套路由。
layout：布尔值或对象，控制是否使用默认布局或自定义布局。
wraps：数组，指定包裹当前路由的所有高阶组件（HOCs）。
exact：布尔值，默认为 true，当设置为 false 时，即使后续路径匹配也会继续向下匹配。

示例：基本配置式路由

假设你有如下的文件结构，并希望用配置式路由来管理这些页面：

src/
├── pages/
│   ├── home.jsx
│   ├── about.jsx
│   └── users/
│       ├── index.jsx
│       └── [id].jsx
└── layouts/
    └── basicLayout.jsx

你可以在 .umirc.js 或 config/config.js 中这样定义路由：

javascript

export default {
  routes: [
    { path: '/', component: 'home', exact: true },
    { path: '/about', component: 'about' },
    {
      path: '/users',
      component: 'users/index',
      routes: [
        { path: '/users/:id', component: 'users/[id]' },
      ],
    },
  ],
};

使用布局

如果你想要某些页面共享相同的布局，可以在路由配置中添加 layout 属性。例如，使用 basicLayout.jsx 作为全局布局：

javascript

export default {
  layout: {
    name: 'BasicLayout',
    path: '@/layouts/basicLayout',
  },
  routes: [
    { path: '/', component: 'home', exact: true },
    { path: '/about', component: 'about' },
    {
      path: '/users',
      component: 'users/index',
      routes: [
        { path: '/users/:id', component: 'users/[id]' },
      ],
    },
  ],
};

如果你想对某个特定的路由禁用布局，或者应用不同的布局，可以通过将 layout 设置为 false 或指定其他布局组件：

javascript

{
  path: '/special-page',
  component: 'specialPage',
  layout: false, // 禁用布局
},
{
  path: '/another-layout',
  component: 'anotherPage',
  layout: '@/layouts/anotherLayout', // 应用不同布局
},

动态加载组件

为了优化初始加载时间和性能，你可以使用动态加载组件的方式。这可以通过返回一个函数并在其中调用 import() 来实现：

javascript

export default {
  routes: [
    {
      path: '/',
      component: () => import('@/pages/home'),
      exact: true,
    },
    {
      path: '/about',
      component: () => import('@/pages/about'),
    },
  ],
};

嵌套路由

嵌套路由允许你在某个路径下定义多个子路径。这对于构建多级导航或分层的应用非常有用：

javascript

export default {
  routes: [
    {
      path: '/dashboard',
      component: 'dashboard',
      routes: [
        { path: '/dashboard/analytics', component: 'dashboard/analytics' },
        { path: '/dashboard/settings', component: 'dashboard/settings' },
      ],
    },
  ],
};

重定向

你可以通过 redirect 属性来设置重定向规则，确保用户访问某些路径时被自动转到另一个路径：

javascript

export default {
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: 'home' },
  ],
};

总结

Umi.js 的配置式路由提供了一种灵活且强大的方式来管理和定制应用程序的路由行为。它不仅能够处理简单的页面映射，还可以应对复杂的嵌套路由、动态加载组件、共享布局和重定向等需求。根据项目的具体要求选择合适的路由配置方式，可以帮助你构建更加高效和可维护的应用程序。

配置式路由 ​