fix: custom routes redirect (#527)

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

packages/platform-web/src/shuvi-app/react/view/ReactView.server.tsx

@@ -27,16 +27,24 @@ export class ReactServerView implements IReactServerView {
     }
 
     if (redirected) {
-      const { location, status } = state as {
-        location: string;
-        status: number;
-      };
-      return redirect(
-        isThirdSite(location)
-          ? location
-          : router.resolve(location, pathname).href,
-        status
-      );
+      // handel loader redirect
+      if (
+        state &&
+        typeof (state as { location: string }).location === 'string'
+      ) {
+        const { location, status } = state as {
+          location: string;
+          status: number;
+        };
+        return redirect(
+          isThirdSite(location)
+            ? location
+            : router.resolve(location, pathname).href,
+          status
+        );
+      }
+      // handle router internal redirect
+      return redirect(pathname);
     }
 
     const loadableModules: string[] = [];

test/e2e/custom-routes.test.ts

@@ -0,0 +1,27 @@
+import { AppCtx, Page, devFixture } from '../utils';
+
+jest.setTimeout(5 * 60 * 1000);
+
+describe('custom routes', () => {
+  let ctx: AppCtx;
+  let page: Page;
+
+  beforeAll(async () => {
+    ctx = await devFixture('custom-routes');
+  });
+  afterAll(async () => {
+    await ctx.close();
+  });
+  afterEach(async () => {
+    await page.close();
+  });
+  it('should support redirect', async () => {
+    page = await ctx.browser.page(ctx.url('/redirect0'));
+    expect(await page.$text('#index')).toBe('Index Page');
+  });
+
+  test('should support nest redirect', async () => {
+    page = await ctx.browser.page(ctx.url('/redirect1'));
+    expect(await page.$text('#about')).toBe('About Page');
+  });
+});

test/fixtures/custom-routes/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "custom-routes", 
+  "dependencies": {
+    "shuvi": "workspace:*"
+  }
+}

test/fixtures/custom-routes/shuvi.config.js

@@ -0,0 +1,16 @@
+export default {
+  ssr: true,
+  routes: [
+    {
+      path: '/',
+      component: 'layout',
+      children: [
+        { path: '/redirect0', redirect: '/' },
+        { path: '', component: 'page' },
+        { path: '/redirect1', redirect: '/redirect2' },
+        { path: '/redirect2', redirect: '/about' },
+        { path: '/about', component: 'about/page' }
+      ]
+    }
+  ]
+};

test/fixtures/custom-routes/src/routes/about/page.js

@@ -0,0 +1 @@
+export default () => <div id="about">About Page</div>;

test/fixtures/custom-routes/src/routes/layout.js

@@ -0,0 +1,8 @@
+import { RouterView } from '@shuvi/runtime';
+import React from 'react';
+
+const MyApp = () => {
+  return <RouterView />;
+};
+
+export default MyApp;

test/fixtures/custom-routes/src/routes/page.js

@@ -0,0 +1,3 @@
+export default function Entry() {
+  return <div id="index">Index Page</div>;
+}