@module-federation/bridge-react 0.2.5 → 0.2.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @module-federation/bridge-react
 
+## 0.2.7
+
+### Patch Changes
+
+- @module-federation/bridge-shared@0.2.7
+
+## 0.2.6
+
+### Patch Changes
+
+- @module-federation/bridge-shared@0.2.6
+
 ## 0.2.5
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const ReactRouterDOM = require("react-router-dom");
 const context = require("./context--mtFt3tp.cjs");
+const ReactRouterDOM = require("react-router-dom");
 const ReactDOM = require("react-dom");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -122,26 +122,11 @@ const RemoteApp = ({
   memoryRoute,
   basename,
   providerInfo,
-  dispathPopstate,
   ...resProps
 }) => {
   const rootRef = React.useRef(null);
   const renderDom = React.useRef(null);
   const providerInfoRef = React.useRef(null);
-  if (dispathPopstate) {
-    const location = ReactRouterDOM__namespace.useLocation();
-    const [pathname, setPathname] = React.useState(location.pathname);
-    React.useEffect(() => {
-      if (pathname !== "" && pathname !== location.pathname) {
-        context.LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
-          name,
-          pathname: location.pathname
-        });
-        context.f();
-      }
-      setPathname(location.pathname);
-    }, [location]);
-  }
   React.useEffect(() => {
     const renderTimeout = setTimeout(() => {
       const providerReturn = providerInfo();
@@ -178,12 +163,10 @@ const RemoteApp = ({
   }, []);
   return /* @__PURE__ */ React.createElement("div", { ref: rootRef });
 };
-RemoteApp["__APP_VERSION__"] = "0.2.5";
-function createRemoteComponent(info) {
+RemoteApp["__APP_VERSION__"] = "0.2.7";
+function withRouterData(WrappedComponent) {
   return (props) => {
     var _a;
-    const exportName = (info == null ? void 0 : info.export) || "default";
-    let basename = "/";
     let enableDispathPopstate = false;
     let routerContextVal;
     try {
@@ -192,9 +175,8 @@ function createRemoteComponent(info) {
     } catch {
       enableDispathPopstate = false;
     }
-    if (props.basename) {
-      basename = props.basename;
-    } else if (enableDispathPopstate) {
+    let basename = "/";
+    if (!props.basename && enableDispathPopstate) {
       const ReactRouterDOMAny = ReactRouterDOM__namespace;
       const useRouteMatch = ReactRouterDOMAny["useRouteMatch"];
       const useHistory = ReactRouterDOMAny["useHistory"];
@@ -205,11 +187,10 @@ function createRemoteComponent(info) {
           basename = useHref == null ? void 0 : useHref("/");
         }
         routerContextVal = React.useContext(UNSAFE_RouteContext);
-        if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
-          basename = context.pathJoin(
-            basename,
-            routerContextVal.matches[0].pathnameBase || "/"
-          );
+        if (routerContextVal && routerContextVal.matches && routerContextVal.matches.length > 0) {
+          const matchIndex = routerContextVal.matches.length - 1;
+          const pathnameBase = routerContextVal.matches[matchIndex].pathnameBase;
+          basename = context.pathJoin(basename, pathnameBase || "/");
         }
       } else {
         const match = useRouteMatch == null ? void 0 : useRouteMatch();
@@ -222,54 +203,80 @@ function createRemoteComponent(info) {
         }
       }
     }
-    const LazyComponent = React.useMemo(() => {
-      return React.lazy(async () => {
-        context.LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
-          basename,
-          lazyComponent: info.loader,
-          exportName,
-          props,
-          routerContextVal
-        });
-        try {
-          const m2 = await info.loader();
-          const moduleName = m2 && m2[Symbol.for("mf_module_id")];
-          context.LoggerInstance.log(
-            `createRemoteComponent LazyComponent loadRemote info >>>`,
-            { basename, name: moduleName, module: m2, exportName, props }
-          );
-          const exportFn = m2[exportName];
-          if (exportName in m2 && typeof exportFn === "function") {
-            return {
-              default: () => /* @__PURE__ */ React.createElement(
-                RemoteApp,
-                {
-                  name: moduleName,
-                  dispathPopstate: enableDispathPopstate,
-                  ...info,
-                  ...props,
-                  providerInfo: exportFn,
-                  basename
-                }
-              )
-            };
-          } else {
-            context.LoggerInstance.log(
-              `createRemoteComponent LazyComponent module not found >>>`,
-              { basename, name: moduleName, module: m2, exportName, props }
-            );
-            throw Error(
-              `Make sure that ${moduleName} has the correct export when export is ${String(
-                exportName
-              )}`
-            );
-          }
-        } catch (error) {
-          throw error;
+    context.LoggerInstance.log(`createRemoteComponent withRouterData >>>`, {
+      ...props,
+      basename,
+      routerContextVal,
+      enableDispathPopstate
+    });
+    if (enableDispathPopstate) {
+      const location = ReactRouterDOM__namespace.useLocation();
+      const [pathname, setPathname] = React.useState(location.pathname);
+      React.useEffect(() => {
+        if (pathname !== "" && pathname !== location.pathname) {
+          context.LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
+            name: props.name,
+            pathname: location.pathname
+          });
+          context.f();
         }
-      });
-    }, [exportName, basename, props.memoryRoute]);
-    return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, null)));
+        setPathname(location.pathname);
+      }, [location]);
+    }
+    return /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, basename });
+  };
+}
+const RemoteApp$1 = withRouterData(RemoteApp);
+function createLazyRemoteComponent(info) {
+  const exportName = (info == null ? void 0 : info.export) || "default";
+  return React.lazy(async () => {
+    context.LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
+      lazyComponent: info.loader,
+      exportName
+    });
+    try {
+      const m2 = await info.loader();
+      const moduleName = m2 && m2[Symbol.for("mf_module_id")];
+      context.LoggerInstance.log(
+        `createRemoteComponent LazyComponent loadRemote info >>>`,
+        { name: moduleName, module: m2, exportName }
+      );
+      const exportFn = m2[exportName];
+      if (exportName in m2 && typeof exportFn === "function") {
+        const RemoteAppComponent = React.forwardRef((props, _ref) => {
+          return /* @__PURE__ */ React.createElement(
+            RemoteApp$1,
+            {
+              name: moduleName,
+              providerInfo: exportFn,
+              exportName: info.export || "default",
+              ...props
+            }
+          );
+        });
+        return {
+          default: RemoteAppComponent
+        };
+      } else {
+        context.LoggerInstance.log(
+          `createRemoteComponent LazyComponent module not found >>>`,
+          { name: moduleName, module: m2, exportName }
+        );
+        throw Error(
+          `Make sure that ${moduleName} has the correct export when export is ${String(
+            exportName
+          )}`
+        );
+      }
+    } catch (error) {
+      throw error;
+    }
+  });
+}
+function createRemoteComponent(info) {
+  const LazyComponent = createLazyRemoteComponent(info);
+  return (props) => {
+    return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props })));
   };
 }
 var client = {};

package/dist/index.d.ts

@@ -19,8 +19,8 @@ export declare function createRemoteComponent<T, E extends keyof T>(info: {
     fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
     export?: E;
 }): (props: {
-    basename?: ProviderParams["basename"];
-    memoryRoute?: ProviderParams["memoryRoute"];
+    basename?: ProviderParams['basename'];
+    memoryRoute?: ProviderParams['memoryRoute'];
 } & ("__BRIDGE_FN__" extends keyof (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never) ? (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"] extends (...args: any) => any ? Parameters<(T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"]>[0] : {} : {})) => default_2.JSX.Element;
 
 declare type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import React__default, { createContext, Component, createElement, isValidElement, useContext, useMemo, useRef, useState, useEffect } from "react";
-import * as ReactRouterDOM from "react-router-dom";
+import React__default, { createContext, Component, createElement, isValidElement, useContext, useState, useEffect, useRef, forwardRef } from "react";
 import { p as pathJoin, L as LoggerInstance, f, a as atLeastReact18, R as RouterContext } from "./context-Bw2PEwa6.js";
+import * as ReactRouterDOM from "react-router-dom";
 import ReactDOM from "react-dom";
 const ErrorBoundaryContext = createContext(null);
 const initialState = {
@@ -103,26 +103,11 @@ const RemoteApp = ({
   memoryRoute,
   basename,
   providerInfo,
-  dispathPopstate,
   ...resProps
 }) => {
   const rootRef = useRef(null);
   const renderDom = useRef(null);
   const providerInfoRef = useRef(null);
-  if (dispathPopstate) {
-    const location = ReactRouterDOM.useLocation();
-    const [pathname, setPathname] = useState(location.pathname);
-    useEffect(() => {
-      if (pathname !== "" && pathname !== location.pathname) {
-        LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
-          name,
-          pathname: location.pathname
-        });
-        f();
-      }
-      setPathname(location.pathname);
-    }, [location]);
-  }
   useEffect(() => {
     const renderTimeout = setTimeout(() => {
       const providerReturn = providerInfo();
@@ -159,12 +144,10 @@ const RemoteApp = ({
   }, []);
   return /* @__PURE__ */ React__default.createElement("div", { ref: rootRef });
 };
-RemoteApp["__APP_VERSION__"] = "0.2.5";
-function createRemoteComponent(info) {
+RemoteApp["__APP_VERSION__"] = "0.2.7";
+function withRouterData(WrappedComponent) {
   return (props) => {
     var _a;
-    const exportName = (info == null ? void 0 : info.export) || "default";
-    let basename = "/";
     let enableDispathPopstate = false;
     let routerContextVal;
     try {
@@ -173,9 +156,8 @@ function createRemoteComponent(info) {
     } catch {
       enableDispathPopstate = false;
     }
-    if (props.basename) {
-      basename = props.basename;
-    } else if (enableDispathPopstate) {
+    let basename = "/";
+    if (!props.basename && enableDispathPopstate) {
       const ReactRouterDOMAny = ReactRouterDOM;
       const useRouteMatch = ReactRouterDOMAny["useRouteMatch"];
       const useHistory = ReactRouterDOMAny["useHistory"];
@@ -186,11 +168,10 @@ function createRemoteComponent(info) {
           basename = useHref == null ? void 0 : useHref("/");
         }
         routerContextVal = useContext(UNSAFE_RouteContext);
-        if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
-          basename = pathJoin(
-            basename,
-            routerContextVal.matches[0].pathnameBase || "/"
-          );
+        if (routerContextVal && routerContextVal.matches && routerContextVal.matches.length > 0) {
+          const matchIndex = routerContextVal.matches.length - 1;
+          const pathnameBase = routerContextVal.matches[matchIndex].pathnameBase;
+          basename = pathJoin(basename, pathnameBase || "/");
         }
       } else {
         const match = useRouteMatch == null ? void 0 : useRouteMatch();
@@ -203,54 +184,80 @@ function createRemoteComponent(info) {
         }
       }
     }
-    const LazyComponent = useMemo(() => {
-      return React__default.lazy(async () => {
-        LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
-          basename,
-          lazyComponent: info.loader,
-          exportName,
-          props,
-          routerContextVal
-        });
-        try {
-          const m2 = await info.loader();
-          const moduleName = m2 && m2[Symbol.for("mf_module_id")];
-          LoggerInstance.log(
-            `createRemoteComponent LazyComponent loadRemote info >>>`,
-            { basename, name: moduleName, module: m2, exportName, props }
-          );
-          const exportFn = m2[exportName];
-          if (exportName in m2 && typeof exportFn === "function") {
-            return {
-              default: () => /* @__PURE__ */ React__default.createElement(
-                RemoteApp,
-                {
-                  name: moduleName,
-                  dispathPopstate: enableDispathPopstate,
-                  ...info,
-                  ...props,
-                  providerInfo: exportFn,
-                  basename
-                }
-              )
-            };
-          } else {
-            LoggerInstance.log(
-              `createRemoteComponent LazyComponent module not found >>>`,
-              { basename, name: moduleName, module: m2, exportName, props }
-            );
-            throw Error(
-              `Make sure that ${moduleName} has the correct export when export is ${String(
-                exportName
-              )}`
-            );
-          }
-        } catch (error) {
-          throw error;
+    LoggerInstance.log(`createRemoteComponent withRouterData >>>`, {
+      ...props,
+      basename,
+      routerContextVal,
+      enableDispathPopstate
+    });
+    if (enableDispathPopstate) {
+      const location = ReactRouterDOM.useLocation();
+      const [pathname, setPathname] = useState(location.pathname);
+      useEffect(() => {
+        if (pathname !== "" && pathname !== location.pathname) {
+          LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
+            name: props.name,
+            pathname: location.pathname
+          });
+          f();
         }
-      });
-    }, [exportName, basename, props.memoryRoute]);
-    return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, null)));
+        setPathname(location.pathname);
+      }, [location]);
+    }
+    return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename });
+  };
+}
+const RemoteApp$1 = withRouterData(RemoteApp);
+function createLazyRemoteComponent(info) {
+  const exportName = (info == null ? void 0 : info.export) || "default";
+  return React__default.lazy(async () => {
+    LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
+      lazyComponent: info.loader,
+      exportName
+    });
+    try {
+      const m2 = await info.loader();
+      const moduleName = m2 && m2[Symbol.for("mf_module_id")];
+      LoggerInstance.log(
+        `createRemoteComponent LazyComponent loadRemote info >>>`,
+        { name: moduleName, module: m2, exportName }
+      );
+      const exportFn = m2[exportName];
+      if (exportName in m2 && typeof exportFn === "function") {
+        const RemoteAppComponent = forwardRef((props, _ref) => {
+          return /* @__PURE__ */ React__default.createElement(
+            RemoteApp$1,
+            {
+              name: moduleName,
+              providerInfo: exportFn,
+              exportName: info.export || "default",
+              ...props
+            }
+          );
+        });
+        return {
+          default: RemoteAppComponent
+        };
+      } else {
+        LoggerInstance.log(
+          `createRemoteComponent LazyComponent module not found >>>`,
+          { name: moduleName, module: m2, exportName }
+        );
+        throw Error(
+          `Make sure that ${moduleName} has the correct export when export is ${String(
+            exportName
+          )}`
+        );
+      }
+    } catch (error) {
+      throw error;
+    }
+  });
+}
+function createRemoteComponent(info) {
+  const LazyComponent = createLazyRemoteComponent(info);
+  return (props) => {
+    return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, { ...props })));
   };
 }
 var client = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "publishConfig": {
     "access": "public"
   },
@@ -25,7 +25,7 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.2.5"
+    "@module-federation/bridge-shared": "0.2.7"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

package/src/create.tsx

@@ -1,14 +1,11 @@
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import * as ReactRouterDOM from 'react-router-dom';
+import React, { forwardRef } from 'react';
 import type { ProviderParams } from '@module-federation/bridge-shared';
-import { LoggerInstance, pathJoin } from './utils';
-import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
+import { LoggerInstance } from './utils';
 import {
   ErrorBoundary,
   ErrorBoundaryPropsWithComponent,
 } from 'react-error-boundary';
-
-declare const __APP_VERSION__: string;
+import RemoteApp from './remote';
 
 export interface RenderFnParams extends ProviderParams {
   dom?: any;
@@ -25,79 +22,67 @@ interface RemoteModule {
   };
 }
 
-interface RemoteAppParams {
-  name: string;
-  providerInfo: NonNullable<RemoteModule['provider']>;
-  dispathPopstate: boolean;
-}
-
-const RemoteApp = ({
-  name,
-  memoryRoute,
-  basename,
-  providerInfo,
-  dispathPopstate,
-  ...resProps
-}: RemoteAppParams & ProviderParams) => {
-  const rootRef = useRef(null);
-  const renderDom = useRef(null);
-  const providerInfoRef = useRef<any>(null);
-  if (dispathPopstate) {
-    const location = ReactRouterDOM.useLocation();
-    const [pathname, setPathname] = useState(location.pathname);
-
-    useEffect(() => {
-      if (pathname !== '' && pathname !== location.pathname) {
-        LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
-          name,
-          pathname: location.pathname,
-        });
-        dispatchPopstateEnv();
-      }
-      setPathname(location.pathname);
-    }, [location]);
-  }
-
-  useEffect(() => {
-    const renderTimeout = setTimeout(() => {
-      const providerReturn = providerInfo();
-      providerInfoRef.current = providerReturn;
-      const renderProps = {
-        name,
-        dom: rootRef.current,
-        basename,
-        memoryRoute,
-        ...resProps,
-      };
-      renderDom.current = rootRef.current;
+function createLazyRemoteComponent<T, E extends keyof T>(info: {
+  loader: () => Promise<T>;
+  loading: React.ReactNode;
+  fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
+  export?: E;
+}) {
+  const exportName = info?.export || 'default';
+  return React.lazy(async () => {
+    LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
+      lazyComponent: info.loader,
+      exportName,
+    });
+    try {
+      const m = (await info.loader()) as RemoteModule;
+      // @ts-ignore
+      const moduleName = m && m[Symbol.for('mf_module_id')];
       LoggerInstance.log(
-        `createRemoteComponent LazyComponent render >>>`,
-        renderProps,
+        `createRemoteComponent LazyComponent loadRemote info >>>`,
+        { name: moduleName, module: m, exportName },
       );
-      providerReturn.render(renderProps);
-    });
 
-    return () => {
-      clearTimeout(renderTimeout);
-      setTimeout(() => {
-        if (providerInfoRef.current?.destroy) {
-          LoggerInstance.log(
-            `createRemoteComponent LazyComponent destroy >>>`,
-            { name, basename, dom: renderDom.current },
-          );
-          providerInfoRef.current?.destroy({
-            dom: renderDom.current,
-          });
-        }
-      });
-    };
-  }, []);
+      // @ts-ignore
+      const exportFn = m[exportName] as any;
 
-  //@ts-ignore
-  return <div ref={rootRef}></div>;
-};
+      if (exportName in m && typeof exportFn === 'function') {
+        const RemoteAppComponent = forwardRef<
+          HTMLDivElement,
+          {
+            basename?: ProviderParams['basename'];
+            memoryRoute?: ProviderParams['memoryRoute'];
+          }
+        >((props, _ref) => {
+          return (
+            <RemoteApp
+              name={moduleName}
+              providerInfo={exportFn}
+              exportName={info.export || 'default'}
+              {...props}
+            />
+          );
+        });
 
-(RemoteApp as any)['__APP_VERSION__'] = __APP_VERSION__;
+        return {
+          default: RemoteAppComponent,
+        };
+      } else {
+        LoggerInstance.log(
+          `createRemoteComponent LazyComponent module not found >>>`,
+          { name: moduleName, module: m, exportName },
+        );
+        throw Error(
+          `Make sure that ${moduleName} has the correct export when export is ${String(
+            exportName,
+          )}`,
+        );
+      }
+    } catch (error) {
+      throw error;
+    }
+  });
+}
 
 export function createRemoteComponent<T, E extends keyof T>(info: {
   loader: () => Promise<T>;
@@ -114,121 +99,18 @@ export function createRemoteComponent<T, E extends keyof T>(info: {
       : {}
     : {};
 
+  const LazyComponent = createLazyRemoteComponent(info);
+
   return (
     props: {
       basename?: ProviderParams['basename'];
       memoryRoute?: ProviderParams['memoryRoute'];
     } & RawComponentType,
   ) => {
-    const exportName = info?.export || 'default';
-    let basename = '/';
-    let enableDispathPopstate = false;
-    let routerContextVal: any;
-    try {
-      ReactRouterDOM.useLocation();
-      enableDispathPopstate = true;
-    } catch {
-      enableDispathPopstate = false;
-    }
-
-    if (props.basename) {
-      basename = props.basename;
-    } else if (enableDispathPopstate) {
-      const ReactRouterDOMAny: any = ReactRouterDOM;
-      // Avoid building tools checking references
-      const useRouteMatch = ReactRouterDOMAny['use' + 'RouteMatch']; //v5
-      const useHistory = ReactRouterDOMAny['use' + 'History']; //v5
-      const useHref = ReactRouterDOMAny['use' + 'Href'];
-      const UNSAFE_RouteContext = ReactRouterDOMAny['UNSAFE_' + 'RouteContext'];
-
-      if (UNSAFE_RouteContext /* react-router@6 */) {
-        if (useHref) {
-          basename = useHref?.('/');
-        }
-        routerContextVal = useContext(UNSAFE_RouteContext);
-        if (
-          routerContextVal &&
-          routerContextVal.matches &&
-          routerContextVal.matches[0] &&
-          routerContextVal.matches[0].pathnameBase
-        ) {
-          basename = pathJoin(
-            basename,
-            routerContextVal.matches[0].pathnameBase || '/',
-          );
-        }
-      } /* react-router@5 */ else {
-        const match = useRouteMatch?.(); // v5
-        if (useHistory /* react-router@5 */) {
-          // there is no dynamic switching of the router version in the project
-          // so hooks can be used in conditional judgment
-          const history = useHistory?.();
-          // To be compatible to history@4.10.1 and @5.3.0 we cannot write like this `history.createHref(pathname)`
-          basename = history?.createHref?.({ pathname: '/' });
-        }
-        if (match /* react-router@5 */) {
-          basename = pathJoin(basename, match?.path || '/');
-        }
-      }
-    }
-
-    const LazyComponent = useMemo(() => {
-      //@ts-ignore
-      return React.lazy(async () => {
-        LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
-          basename,
-          lazyComponent: info.loader,
-          exportName,
-          props,
-          routerContextVal,
-        });
-        try {
-          const m = (await info.loader()) as RemoteModule;
-          // @ts-ignore
-          const moduleName = m && m[Symbol.for('mf_module_id')];
-          LoggerInstance.log(
-            `createRemoteComponent LazyComponent loadRemote info >>>`,
-            { basename, name: moduleName, module: m, exportName, props },
-          );
-
-          // @ts-ignore
-          const exportFn = m[exportName] as any;
-
-          if (exportName in m && typeof exportFn === 'function') {
-            return {
-              default: () => (
-                <RemoteApp
-                  name={moduleName}
-                  dispathPopstate={enableDispathPopstate}
-                  {...info}
-                  {...props}
-                  providerInfo={exportFn}
-                  basename={basename}
-                />
-              ),
-            };
-          } else {
-            LoggerInstance.log(
-              `createRemoteComponent LazyComponent module not found >>>`,
-              { basename, name: moduleName, module: m, exportName, props },
-            );
-            throw Error(
-              `Make sure that ${moduleName} has the correct export when export is ${String(
-                exportName,
-              )}`,
-            );
-          }
-        } catch (error) {
-          throw error;
-        }
-      });
-    }, [exportName, basename, props.memoryRoute]);
-
-    //@ts-ignore
     return (
       <ErrorBoundary FallbackComponent={info.fallback}>
         <React.Suspense fallback={info.loading}>
-          <LazyComponent />
+          <LazyComponent {...props} />
         </React.Suspense>
       </ErrorBoundary>
     );

package/src/remote/index.tsx

@@ -0,0 +1,165 @@
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import * as ReactRouterDOM from 'react-router-dom';
+import type { ProviderParams } from '@module-federation/bridge-shared';
+import { LoggerInstance, pathJoin } from '../utils';
+import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
+
+declare const __APP_VERSION__: string;
+
+export interface RenderFnParams extends ProviderParams {
+  dom?: any;
+}
+
+interface RemoteModule {
+  provider: () => {
+    render: (
+      info: ProviderParams & {
+        dom: any;
+      },
+    ) => void;
+    destroy: (info: { dom: any }) => void;
+  };
+}
+
+interface RemoteAppParams {
+  name: string;
+  providerInfo: NonNullable<RemoteModule['provider']>;
+  exportName: string | number | symbol;
+}
+
+const RemoteApp = ({
+  name,
+  memoryRoute,
+  basename,
+  providerInfo,
+  ...resProps
+}: RemoteAppParams & ProviderParams) => {
+  const rootRef = useRef(null);
+  const renderDom = useRef(null);
+  const providerInfoRef = useRef<any>(null);
+
+  useEffect(() => {
+    const renderTimeout = setTimeout(() => {
+      const providerReturn = providerInfo();
+      providerInfoRef.current = providerReturn;
+      const renderProps = {
+        name,
+        dom: rootRef.current,
+        basename,
+        memoryRoute,
+        ...resProps,
+      };
+      renderDom.current = rootRef.current;
+      LoggerInstance.log(
+        `createRemoteComponent LazyComponent render >>>`,
+        renderProps,
+      );
+      providerReturn.render(renderProps);
+    });
+
+    return () => {
+      clearTimeout(renderTimeout);
+      setTimeout(() => {
+        if (providerInfoRef.current?.destroy) {
+          LoggerInstance.log(
+            `createRemoteComponent LazyComponent destroy >>>`,
+            { name, basename, dom: renderDom.current },
+          );
+          providerInfoRef.current?.destroy({
+            dom: renderDom.current,
+          });
+        }
+      });
+    };
+  }, []);
+
+  //@ts-ignore
+  return <div ref={rootRef}></div>;
+};
+
+(RemoteApp as any)['__APP_VERSION__'] = __APP_VERSION__;
+
+interface ExtraDataProps {
+  basename?: string;
+}
+
+export function withRouterData<P extends Parameters<typeof RemoteApp>[0]>(
+  WrappedComponent: React.ComponentType<P & ExtraDataProps>,
+): React.FC<Omit<P, keyof ExtraDataProps>> {
+  return (props: any) => {
+    let enableDispathPopstate = false;
+    let routerContextVal: any;
+    try {
+      ReactRouterDOM.useLocation();
+      enableDispathPopstate = true;
+    } catch {
+      enableDispathPopstate = false;
+    }
+    let basename = '/';
+
+    if (!props.basename && enableDispathPopstate) {
+      const ReactRouterDOMAny: any = ReactRouterDOM;
+      // Avoid building tools checking references
+      const useRouteMatch = ReactRouterDOMAny['use' + 'RouteMatch']; //v5
+      const useHistory = ReactRouterDOMAny['use' + 'History']; //v5
+      const useHref = ReactRouterDOMAny['use' + 'Href'];
+      const UNSAFE_RouteContext = ReactRouterDOMAny['UNSAFE_' + 'RouteContext'];
+
+      if (UNSAFE_RouteContext /* react-router@6 */) {
+        if (useHref) {
+          basename = useHref?.('/');
+        }
+        routerContextVal = useContext(UNSAFE_RouteContext);
+        if (
+          routerContextVal &&
+          routerContextVal.matches &&
+          routerContextVal.matches.length > 0
+        ) {
+          const matchIndex = routerContextVal.matches.length - 1;
+          const pathnameBase =
+            routerContextVal.matches[matchIndex].pathnameBase;
+          basename = pathJoin(basename, pathnameBase || '/');
+        }
+      } /* react-router@5 */ else {
+        const match = useRouteMatch?.(); // v5
+        if (useHistory /* react-router@5 */) {
+          // there is no dynamic switching of the router version in the project
+          // so hooks can be used in conditional judgment
+          const history = useHistory?.();
+          // To be compatible to history@4.10.1 and @5.3.0 we cannot write like this `history.createHref(pathname)`
+          basename = history?.createHref?.({ pathname: '/' });
+        }
+        if (match /* react-router@5 */) {
+          basename = pathJoin(basename, match?.path || '/');
+        }
+      }
+    }
+
+    LoggerInstance.log(`createRemoteComponent withRouterData >>>`, {
+      ...props,
+      basename,
+      routerContextVal,
+      enableDispathPopstate,
+    });
+
+    if (enableDispathPopstate) {
+      const location = ReactRouterDOM.useLocation();
+      const [pathname, setPathname] = useState(location.pathname);
+
+      useEffect(() => {
+        if (pathname !== '' && pathname !== location.pathname) {
+          LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
+            name: props.name,
+            pathname: location.pathname,
+          });
+          dispatchPopstateEnv();
+        }
+        setPathname(location.pathname);
+      }, [location]);
+    }
+
+    return <WrappedComponent {...(props as P)} basename={basename} />;
+  };
+}
+
+export default withRouterData(RemoteApp);