但这样并没有显示子路由的页面

抱歉，我之前的回答可能有误导性。在 Umi 中，嵌套路由的子路由组件需要在父组件中的特定位置渲染，否则子路由的页面将不会显示。

以下是一个修正后的示例，演示如何正确显示嵌套路由的子页面：

// src/layouts/productsLayout.js

export default function ProductsLayout(props) {
  return (
    <div>
      <h1>Products Layout</h1>
      <div className="content">{props.children}</div>
    </div>
  );
}

在父组件 `productsLayout` 中，我们使用 `props.children` 渲染子路由的页面内容。

// src/routes.js

export default [
  {
    path: '/',
    component: '@/layouts/index',
    routes: [
      {
        path: '/',
        component: '@/pages/home',
        exact: true,
      },
      {
        path: '/about',
        component: '@/pages/about',
        exact: true,
      },
      {
        path: '/products',
        component: '@/layouts/productsLayout',
        routes: [
          {
            path: '/products',
            redirect: '/products/all',
          },
          {
            path: '/products/all',
            component: '@/pages/allProducts',
            exact: true,
          },
          {
            path: '/products/category',
            component: '@/pages/productCategory',
            exact: true,
          },
        ],
      },
    ],
  },
];

请注意，我们将 `productsLayout` 组件作为 `/products` 路由的组件，并在其内部使用 `routes` 属性配置子路由。

这样，当用户访问 `/products/all` 时，`allProducts` 组件将被渲染，并显示在 `productsLayout` 组件的 `props.children` 中。

希望这次能够帮助你正确显示嵌套路由的子页面。如果还有其他问题，请随时提问！