@umijs/renderer-react 4.0.15 → 4.0.18

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',

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,11 @@
 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 React, { useMemo } from 'react';
+import { generatePath, Navigate, useParams, useLocation, useNavigate, Outlet } from 'react-router-dom';
+import { RouteContext, useRouteData } from "./routeContext";
 export function createClientRoutes(opts) {
   var routesById = opts.routesById,
       parentId = opts.parentId,
@@ -13,16 +13,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 +50,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 +61,79 @@ 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 location = useLocation();
+  var navigate = useNavigate();
+  var params = useParams();
 
-  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 _useRouteData = useRouteData(),
+      route = _useRouteData.route;
+
+  var match = useMemo(function () {
+    return {
+      params: params,
+      isExact: true,
+      path: route.path,
+      url: location.pathname
+    };
+  }, [location.pathname, route.path, params]);
+  var history = useMemo(function () {
+    return {
+      back: function back() {
+        return navigate(-1);
+      },
+      goBack: function goBack() {
+        return navigate(-1);
+      },
+      location: location,
+      push: function push(url, state) {
+        return navigate(url, {
+          state: state
+        });
+      },
+      replace: function replace(url, state) {
+        return navigate(url, {
+          replace: true,
+          state: state
+        });
+      }
+    };
+  }, [location, navigate]); // staticContext 没有兼容 好像没看到对应的兼容写法
+
+  var Component = props.loader;
+  return /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: /*#__PURE__*/React.createElement(props.loadingComponent, null)
+  }, /*#__PURE__*/React.createElement(Component, {
+    location: location,
+    match: match,
+    history: history,
+    params: params
+  }, 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.15",
+  "version": "4.0.18",
   "description": "@umijs/renderer-react",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/renderer-react#readme",
   "bugs": "https://github.com/umijs/umi/issues",