fix(theme): error when root routes be nested in other one (#411)

* fix: fix routes is null error

* test(preset): add case for integrated mode with plugin-layout

Co-authored-by: PeachScript <[email protected]>

packages/preset-dumi/src/fixtures/integrate/.umirc.ts

@@ -1,4 +1,6 @@
 export default {
+  history: { type: 'memory' },
+  mountElementId: '',
   mode: 'site',
   resolve: {
     includes: ['src/components'],
@@ -7,7 +9,7 @@ export default {
     '/hello': [
       {
         title: 'Hello',
-        children: ['src/components/Hello'],
+        children: ['Hello'],
       },
     ],
   },
@@ -27,11 +29,12 @@ export default {
   routes: [
     {
       path: '/A',
-      component: '@/pages/A'
+      component: './A'
     },
     {
       path: '/',
-      component: '@/pages',
+      redirect: '/~docs'
     }
-  ]
+  ],
+  plugins: ['./wrapper.ts']
 }

packages/preset-dumi/src/fixtures/integrate/__test__/__mocks__/@@/core/devScripts.ts

@@ -0,0 +1 @@
+export default null;

packages/preset-dumi/src/fixtures/integrate/wrapper.ts

@@ -0,0 +1,16 @@
+import { IApi } from '@umijs/types';
+
+/**
+ * plugin for simulate @umijs/plugin-layout to wrap all routes
+ */
+export default (api: IApi) => {
+  api.modifyRoutes(memo => {
+    return [
+      {
+        path: '/',
+        component: `(props) => props.children`,
+        routes: memo,
+      },
+    ];
+  });
+}

packages/preset-dumi/src/index.test.ts

@@ -196,7 +196,7 @@ describe('preset-dumi', () => {
     // expect all docs inside /~docs route path and keep original umi routes
     const routes = await (api as any).getRoutes();
 
-    expect(routes.map(route => route.path)).toEqual([
+    expect(routes[0].routes.map(route => route.path)).toEqual([
       '/~demos/:uuid',
       '/_demos/:uuid',
       '/~docs',
@@ -217,6 +217,18 @@ describe('preset-dumi', () => {
 
     // expect path correct
     expect(fs.existsSync(rootRoute.routes[0].component)).toBeTruthy();
+
+    await service.runCommand({
+      name: 'g',
+      args: {
+        _: ['g', 'tmp'],
+      },
+    });
+
+    const reactNode = require(path.join(cwd, 'src', '.umi', 'umi.ts')).default;
+
+    // expect find correct dumi root routes, to not throw error
+    render(reactNode);
   });
 
   it('integrate mode with production', async () => {
@@ -238,7 +250,7 @@ describe('preset-dumi', () => {
     });
 
     // expect dumi disabled in integrate with production
-    expect((await (api as any).getRoutes()).map(route => route.path)).toEqual(['/A', '/']);
+    expect((await (api as any).getRoutes())[0].routes.map(route => route.path)).toEqual(['/A', '/']);
   });
 
   it('should generate sitemap.xml', async () => {

packages/preset-dumi/src/theme/layout.tsx

@@ -127,6 +127,18 @@ const useCurrentBase = (
   return base;
 };
 
+const findDumiRoot = (routes: any): IThemeContext['routes'] => {
+  return routes.find(item => {
+    if (item.__dumiRoot) {
+      return true;
+    }
+    if (item.routes) {
+      return findDumiRoot(item.routes);
+    }
+    return false;
+  })?.routes;
+};
+
 /**
  * outer theme layout
  */
@@ -137,7 +149,7 @@ const OuterLayout: React.FC<IOuterLayoutProps & IRouteComponentProps> = props =>
     route.path.replace(/^\/$/, '//'),
     '',
   );
-  const routes = props.routes.find(item => item.__dumiRoot).routes as IThemeContext['routes'];
+  const routes = findDumiRoot(props.routes) || [];
   const meta = useCurrentRouteMeta(routes, location.pathname);
   // use non-prefix for detect current locale, such as /~docs/en-US -> /en-US
   const locale = useCurrentLocale(config.locales, pathWithoutPrefix);