Umi.js 嵌套路由配置的正确使用方式

嵌套路由的基本概念

在 Umi.js 框架中，嵌套路由是一种常见的路由组织方式，它允许开发者在父路由下定义子路由，形成层次化的路由结构。这种设计模式特别适合构建具有复杂布局的应用程序，其中某些页面共享相同的布局组件。

常见配置误区

许多开发者在使用 Umi.js 的嵌套路由时，会遇到子路由组件不渲染的问题。典型的错误配置如下：

routes: [
    {
        path: "/app",
        component: "./index",
        routes: [
            {
                path: "/app/docs",
                component: "./docs"
            }
        ]
    }
]

在这种配置下，访问 /app/docs 路径时，期望渲染 ./docs 组件，但实际上仍然渲染的是父路由的 ./index 组件。

问题根源分析

这个问题的根本原因在于 React Router 的嵌套路由工作机制。当使用嵌套路由时，父组件需要明确指定子组件渲染的位置，这是通过在父组件模板中使用 <Outlet/> 组件实现的。

正确的解决方案

方案一：使用 Outlet 占位符

正确的做法是在父组件中添加 <Outlet/> 作为子路由的渲染位置：

1. 首先保持路由配置不变
2. 在父组件 ./index 中添加：

import { Outlet } from 'umi';

function IndexPage() {
  return (
    <div>
      <h1>父组件内容</h1>
      <Outlet />
    </div>
  );
}

这样，当访问 /app/docs 时，父组件 ./index 会渲染，同时 ./docs 组件会在 <Outlet/> 的位置渲染。

方案二：扁平化路由结构

如果不需要嵌套渲染，可以采用扁平化的路由配置：

routes: [
    {
        path: "/app",
        component: "./index",
    },
    {
        path: "/app/docs",
        component: "./docs"
    }
]

这种配置下，两个路由完全独立，互不嵌套。

最佳实践建议

1. 明确路由关系：在设计路由结构前，先明确页面间的嵌套关系
2. 合理使用 Outlet：只有真正需要嵌套渲染时才使用嵌套路由配置
3. 保持简洁：避免过度嵌套，超过3层的嵌套路由会增加维护难度
4. 命名规范：为路由组件使用清晰的命名，便于团队协作

总结

Umi.js 的嵌套路由功能强大，但需要正确理解其工作原理才能有效使用。关键在于记住：父组件中必须使用 <Outlet/> 来指定子组件的渲染位置。通过合理规划路由结构和正确使用 Outlet，可以构建出清晰、可维护的前端路由系统。