@umijs/renderer-react 4.0.17 → 4.0.20

package/dist/appContext.d.ts

@@ -10,6 +10,7 @@ interface IAppContextType {
     clientLoaderData: ILoaderData;
     preloadRoute?: (to: string) => void;
     serverLoaderData: ILoaderData;
+    history?: any;
 }
 export declare const AppContext: React.Context<IAppContextType>;
 export declare function useAppData(): IAppContextType;

package/dist/browser.d.ts

@@ -15,4 +15,5 @@ export declare function renderClient(opts: {
     loadingComponent?: React.ReactNode;
     history: History;
     hydrate?: boolean;
+    reactRouter5Compat?: boolean;
 }): void;

package/dist/browser.js

@@ -66,7 +66,8 @@ export function renderClient(opts) {
   var clientRoutes = createClientRoutes({
     routesById: opts.routes,
     routeComponents: opts.routeComponents,
-    loadingComponent: opts.loadingComponent
+    loadingComponent: opts.loadingComponent,
+    reactRouter5Compat: opts.reactRouter5Compat
   });
   opts.pluginManager.applyPlugins({
     key: 'patchClientRoutes',
@@ -202,7 +203,8 @@ export function renderClient(opts) {
         basename: basename,
         clientLoaderData: clientLoaderData,
         serverLoaderData: serverLoaderData,
-        preloadRoute: handleRouteChange
+        preloadRoute: handleRouteChange,
+        history: opts.history
       }
     }, rootContainer);
   };

package/dist/routes.d.ts

@@ -5,4 +5,5 @@ export declare function createClientRoutes(opts: {
     routeComponents: Record<string, any>;
     parentId?: string;
     loadingComponent?: React.ReactNode;
+    reactRouter5Compat?: boolean;
 }): IClientRoute[];

package/dist/routes.js

@@ -1,11 +1,12 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/extends";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 var _excluded = ["redirect"];
 // @ts-ignore
 import React from 'react';
-import { generatePath, Navigate, useParams } from 'react-router-dom';
-import { RouteContext } from "./routeContext";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { generatePath, Navigate, useParams, Outlet } from 'react-router-dom';
+import { RouteContext, useRouteData } from "./routeContext";
+import { useAppData } from "./appContext";
 export function createClientRoutes(opts) {
   var routesById = opts.routesById,
       parentId = opts.parentId,
@@ -13,16 +14,23 @@ export function createClientRoutes(opts) {
   return Object.keys(routesById).filter(function (id) {
     return routesById[id].parentId === parentId;
   }).map(function (id) {
-    var route = createClientRoute({
+    var route = createClientRoute(_objectSpread({
       route: routesById[id],
       routeComponent: routeComponents[id],
-      loadingComponent: opts.loadingComponent
-    });
+      loadingComponent: opts.loadingComponent,
+      reactRouter5Compat: opts.reactRouter5Compat
+    }, opts.reactRouter5Compat && {
+      // TODO: 这个不准，没考虑 patchClientRoutes 的场景
+      hasChildren: Object.keys(routesById).filter(function (rid) {
+        return routesById[rid].parentId === id;
+      }).length > 0
+    }));
     var children = createClientRoutes({
       routesById: routesById,
       routeComponents: routeComponents,
       parentId: route.id,
-      loadingComponent: opts.loadingComponent
+      loadingComponent: opts.loadingComponent,
+      reactRouter5Compat: opts.reactRouter5Compat
     });
 
     if (children.length > 0) {
@@ -43,7 +51,7 @@ function NavigateWithParams(props) {
     to: generatePath(props.to, params)
   });
 
-  return /*#__PURE__*/_jsx(Navigate, _objectSpread({
+  return /*#__PURE__*/React.createElement(Navigate, _extends({
     replace: true
   }, propsWithParams));
 }
@@ -54,40 +62,58 @@ function createClientRoute(opts) {
   var redirect = route.redirect,
       props = _objectWithoutProperties(route, _excluded);
 
+  var Remote = opts.reactRouter5Compat ? RemoteComponentReactRouter5 : RemoteComponent;
   return _objectSpread({
-    element: redirect ? /*#__PURE__*/_jsx(NavigateWithParams, {
+    element: redirect ? /*#__PURE__*/React.createElement(NavigateWithParams, {
       to: redirect
-    }) : /*#__PURE__*/_jsx(RouteContext.Provider, {
+    }) : /*#__PURE__*/React.createElement(RouteContext.Provider, {
       value: {
         route: opts.route
-      },
-      children: /*#__PURE__*/_jsx(RemoteComponent, {
-        loader: opts.routeComponent,
-        loadingComponent: opts.loadingComponent || DefaultLoading
-      })
-    })
+      }
+    }, /*#__PURE__*/React.createElement(Remote, {
+      loader: /*#__PURE__*/React.memo(opts.routeComponent),
+      loadingComponent: opts.loadingComponent || DefaultLoading,
+      hasChildren: opts.hasChildren
+    }))
   }, props);
 }
 
 function DefaultLoading() {
-  return /*#__PURE__*/_jsx("div", {});
+  return /*#__PURE__*/React.createElement("div", null);
 }
 
-function RemoteComponent(props) {
-  var useSuspense = true; // !!React.startTransition;
+function RemoteComponentReactRouter5(props) {
+  var _useRouteData = useRouteData(),
+      route = _useRouteData.route;
 
-  if (useSuspense) {
-    var Component = props.loader;
-    return /*#__PURE__*/_jsx(React.Suspense, {
-      fallback: /*#__PURE__*/_jsx(props.loadingComponent, {}),
-      children: /*#__PURE__*/_jsx(Component, {})
-    });
-  } else {
-    return null; // // @ts-ignore
-    //     import loadable from '@loadable/component';
-    //     const Component = loadable(props.loader, {
-    //       fallback: <props.loadingComponent />,
-    //     });
-    //     return <Component />;
-  }
+  var _useAppData = useAppData(),
+      history = _useAppData.history,
+      clientRoutes = _useAppData.clientRoutes;
+
+  var params = useParams();
+  var match = {
+    params: params,
+    isExact: true,
+    path: route.path,
+    url: history.location.pathname
+  }; // staticContext 没有兼容 好像没看到对应的兼容写法
+
+  var Component = props.loader;
+  return /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: /*#__PURE__*/React.createElement(props.loadingComponent, null)
+  }, /*#__PURE__*/React.createElement(Component, {
+    location: history.location,
+    match: match,
+    history: history,
+    params: params,
+    route: route,
+    routes: clientRoutes
+  }, props.hasChildren && /*#__PURE__*/React.createElement(Outlet, null)));
+}
+
+function RemoteComponent(props) {
+  var Component = props.loader;
+  return /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: /*#__PURE__*/React.createElement(props.loadingComponent, null)
+  }, /*#__PURE__*/React.createElement(Component, null));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/renderer-react",
-  "version": "4.0.17",
+  "version": "4.0.20",
   "description": "@umijs/renderer-react",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/renderer-react#readme",
   "bugs": "https://github.com/umijs/umi/issues",