Seeking Guidance on Integrating React Application Routing into Micro Frontend Architecture

[umgu]

Hello,

I have an existing Micro Frontend architecture with multiple Next.js apps working together using Module Federation. I'm now looking to add a new React application as a Micro Frontend to this setup.

The integration of the React application itself has been relatively straightforward. However, I'm facing challenges when it comes to integrating the routing of my React app with the routing in the current Micro Frontend architecture.

Specifically, my React app has its own routing, and I'm struggling to ensure seamless navigation and routing between this new app and the existing Next.js micro frontends.

Can you please provide guidance, best practices, or reference materials on how to effectively integrate the routing of this React application into my current Micro Frontend architecture? I'd greatly appreciate any insights or examples that can help me overcome this routing challenge and get started.

Thank you in advance.

[ScriptedAlchemy]

https://modernjs.dev/en/index.html

This is going to give you the best milage. We are working on a MFE focused release of this framework, with ssr and routing already built in, some state mamagement, hmr and TS support.

Should happen this quarter, but the framwork works perfectly currently. Just going to become much better for MFE over this quarter.

Ill be working on more federation specific things like documentation and searching docs, similar to storybook - but via MFP where its all or mostly magicly connected.

Current state, this runs a few thousand micro frontends without a problem.
I work on the infra team so ill just quote our repo:

About us

We are the Web Infra team at ByteDance. Our primitive goal is to provide excellent technical solutions to help the company's business grow, and build an open technical ecosystem to promote the development of frontend technology in the company and the industry.

Our projects

Rspack
Rsbuild
Rspress
Oxc
Modern.js
Garfish