fix(unmount): call unmount callback when switching between MFEs

Author: nebarf

app1/src/bootstrap.tsx

@@ -17,6 +17,8 @@ const mount = ({
   const router = createRouter({ strategy: routingStrategy, initialPathname });
   const root = createRoot(mountPoint);
   root.render(<RouterProvider router={router} />);
+
+  return () => queueMicrotask(() => root.unmount());
 };
 
 export { mount };

app1/src/components/NavigationManager.tsx

@@ -1,5 +1,6 @@
 import React, { ReactElement, useEffect } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { matchRoutes, useLocation, useNavigate } from "react-router-dom";
+import { routes } from "../routing/routes";
 
 interface NavigationManagerProps {
   children: ReactElement;
@@ -12,7 +13,7 @@ export function NavigationManager({ children }: NavigationManagerProps) {
   useEffect(() => {
     function shellNavigationHandler(event: Event) {
       const pathname = (event as CustomEvent<string>).detail;
-      if (location.pathname === pathname) {
+      if (location.pathname === pathname || !matchRoutes(routes, { pathname })) {
         return;
       }
       navigate(pathname);

app2/src/bootstrap.tsx

@@ -17,6 +17,8 @@ const mount = ({
   const router = createRouter({ strategy: routingStrategy, initialPathname });
   const root = createRoot(mountPoint);
   root.render(<RouterProvider router={router} />);
+
+  return () => queueMicrotask(() => root.unmount());
 };
 
 export { mount };

app2/src/components/NavigationManager.tsx

@@ -1,5 +1,6 @@
 import React, { ReactElement, useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { matchRoutes, useLocation, useNavigate } from 'react-router-dom';
+import { routes } from '../routing/routes';
 
 interface NavigationManagerProps {
   children: ReactElement;
@@ -12,7 +13,7 @@ export function NavigationManager({ children }: NavigationManagerProps) {
   useEffect(() => {
     function shellNavigationHandler(event: Event) {
       const pathname = (event as CustomEvent<string>).detail;
-      if (location.pathname === pathname) {
+      if (location.pathname === pathname || !matchRoutes(routes, { pathname })) {
         return;
       }
       navigate(pathname);

app2/src/pages/Page1.tsx renamed to app2/src/pages/PageA.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-export function Page1() {
+export function PageA() {
   return (
     <React.Fragment>
       <div>Page 1 from App2</div>
-      <Link to="/page-2">Go to Page 2</Link>
+      <Link to="/page-b">Go to Page B</Link>
     </React.Fragment>
   );
 }

app2/src/pages/Page2.tsx renamed to app2/src/pages/PageB.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-export function Page2() {
+export function PageB() {
   return (
     <React.Fragment>
-      <div>Page 2 from App2</div>
-      <Link to="/page-1">Go to Page 1</Link>
+      <div>Page B from App2</div>
+      <Link to="/page-a">Go to Page A</Link>
     </React.Fragment>
   );
 }

app2/src/routing/routes.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Outlet } from "react-router-dom";
 import { NavigationManager } from "../components/NavigationManager";
-import { Page1 } from "../pages/Page1";
-import { Page2 } from "../pages/Page2";
+import { PageA } from "../pages/PageA";
+import { PageB } from "../pages/PageB";
 
 export const routes = [
   {
@@ -15,15 +15,15 @@ export const routes = [
     children: [
       {
         index: true,
-        element: <Page1 />,
+        element: <PageA />,
       },
       {
-        path: "page-1",
-        element: <Page1 />,
+        path: "page-a",
+        element: <PageA />,
       },
       {
-        path: "page-2",
-        element: <Page2 />,
+        path: "page-b",
+        element: <PageB />,
       },
     ],
   },

shell/src/App.tsx

@@ -1,9 +1,7 @@
-import React, { Suspense } from "react";
+import React from "react";
 import "./index.css";
 import { Router } from "./routing/Router";
 
 export const App = () => (
-  <Suspense fallback={<div>Loading...</div>}>
-    <Router />
-  </Suspense>
+  <Router />
 );

shell/src/components/App1.tsx

@@ -45,13 +45,14 @@ export default () => {
   );
 
   const isFirstRunRef = useRef(true);
+  const unmountRef = useRef(() => {});
   // Mount app1 MFE
   useEffect(
     () => {
       if (!isFirstRunRef.current) {
         return;
       }
-      mount({
+      unmountRef.current = mount({
         mountPoint: wrapperRef.current!,
         initialPathname: location.pathname.replace(
           app1Basename,
@@ -63,5 +64,7 @@ export default () => {
     [location],
   );
 
+  useEffect(() => unmountRef.current, []);
+
   return <div ref={wrapperRef} id="app1-mfe" />;
 };

shell/src/components/App2.tsx

@@ -45,13 +45,14 @@ export default () => {
   );
 
   const isFirstRunRef = useRef(true);
+  const unmountRef = useRef(() => {});
   // Mount app1 MFE
   useEffect(
     () => {
       if (!isFirstRunRef.current) {
         return;
       }
-      mount({
+      unmountRef.current = mount({
         mountPoint: wrapperRef.current!,
         initialPathname: location.pathname.replace(
           app2Basename,
@@ -63,5 +64,8 @@ export default () => {
     [location],
   );
 
+  useEffect(() => unmountRef.current, []);
+
+
   return <div ref={wrapperRef} id="app2-mfe" />;
 };