Route navigation between apps (React, React Router Dom)

[wowblvck]

Hello. The documentation offers many examples (thank you very much for that) on using MF in various configurations and across different stacks. However, I haven’t been able to find a solution to the problem I’m interested in (maybe I was just inattentive, or perhaps there’s simply no solution).

In our products, we use React and React Router DOM v6. We now need to combine them into a single SPA to enable sharing components and states. I found numerous instructions describing the possibility of a global shell and managing routing through it, but I didn’t find any mention of the possibility of navigating from one application to another.

For example, I have two applications using RSBuild and MF 2.0, and I’m also using MF Bridge React. Each application creates routes with createBrowserRoute. The applications are exported and connected to the host application, which also has React Router DOM v6. Navigation through the Shell application works perfectly, but what about navigating from one application to another? If I have a link in Remote 1 (e.g., /dashboard) to Remote 2 (e.g., /profile), and I try to navigate using or navigate("/profile"), the routing only works within the context of Remote 1. Are there ways to make all applications work as a single SPA with cross-application routing?

It would be great if someone could share a solution or tutorial on how to achieve this.

[ScriptedAlchemy]

Could you provide a repo demonstrating the problem

[wowblvck]

As an example, let’s take a look at this example (example link).

We have a shared navigation menu (in host) that allows us to navigate between Home, Remote1, and Remote2.

In Remote1, there’s its own navigation menu where we can move between Home and Detail.

Let’s assume Remote2 has a path /detail2. Is it possible to create a link in Remote1 that navigates to the /detail2 path in Remote2?

It would look something like this:

Remote1 (Link to /detail2) -> Remote2 (Path /detail2).

[ScriptedAlchemy]

@danpeen is working on some updates to our bridges, she will likely be the best person to respond here

[juhinagpure]

hey @wowblvck

Cross-App Routing with Module Federation and React Router v6
To enable seamless navigation between multiple micro-frontends (MF) in a single SPA:

1.Centralized History:
Use a shared history instance in the host app, allowing consistent navigation across all micro-apps.

2.Shared Router:
Use HistoryRouter in each micro-app to utilize this shared history, instead of separate createBrowserRouter instances.

3.Central Routing Setup:
Define all routes in the host app to manage navigation across micro-apps.
Key Benefit: This setup ensures all micro-apps share the same routing context, enabling smooth cross-navigation (history.push('/path')) as if it's a single unified React app.

example:

1. import { createBrowserHistory } from 'history';
   export default createBrowserHistory();

2.import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
import history from 'hostApp/history';

const App = () => (

{routes }

);
export default App;

3.
<Route path="/dashboard/" element={} />
<Route path="/profile/" element={} />

4.import history from 'hostApp/history';
history.push('/profile');

This keeps navigation in sync across micro-apps as a single Single page application.