Dynamic / Nested routes

Hi there

In your examples shared-routing and shared-routes2 you showed how to use react-router-dom with Module Federation. However, you defined route config, where specified all route paths and their Components in one place. It’s not always the case and good only for TODO-size applications. In real world we use many Switch, Link, Route elements scattered everywhere in code. It is not possible to combine all the route definitions in one place.

I have problem using react-router-dom with Module Federation, because a component which I expose from MicroFrontend 1 has Switch and Link elements inside. The MicroFrontend 2, which consumes the remote component has BroswerRouter, wrapping the remote component, however it does not work. In JS runtime I get the next errors:

Uncaught Error: Invariant failed: You should not use <Link> outside a <Router> Uncaught Error: Invariant failed: You should not use <Switch> outside a <Router>

Links and switch elements from remote component of Microfrontend 1 are not inside BrowserRouter of Microfrontend 2. What is the solution?

RemoteComponent of Microfrontend 1

const RemoteComponent = () => {
  return (
    <>
      <ul>
        <li>
          <Link to="/path/path1">Path1</Link>
        </li>
        <li>
          <Link to="/path/path2">Path2</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/path/path1">Path1</Route>
        <Route path="/path/path2">Path2</Route>
      </Switch>
    </>
  );
};

export default RemoteComponent;

webpack config of MicroFrontend1

new ModuleFederationPlugin({
      name: "MFE1",
      filename: "remoteEntry.js",
      exposes: {
        "./RemoteComponent": "./src/components/RemoteComponent/RemoteComponent",
      },
    })

App of MicroFrontend 2

const RemoteComponent = lazy(() => import("MFE1/RemoteComponent"));

function App() {
  return (
    <BrowserRouter>
      <ul>
        <Link to="/path">General path</Link>
      </ul>
      <Suspense fallback="...loading">
        <Switch>
          <Route path="/path">
            <RemoteComponent />
          </Route>
        </Switch>
      </Suspense>
    </BrowserRouter>
  );
}

webpack config of Microfrontend 2

new ModuleFederationPlugin({
      name: "MFE2",
      remotes: {
        MFE1: "MFE1@http://localhost:8080/remoteEntry.js",
      },
    }),

[rvitruk]

I have already found the solution by myself !

I should have put react-router-dom in shared

This issue may be closed.

[dyukovlad]

@GastonMGrecco no, we ourselves use 5.3