MFEs & Dynamically Generated Routes?

Hello! I began implementing Module Federation MFE architecture for my company’s software ecosystem a few months ago, and it has been amazing. I have only experienced one issue, and it relates to dynamic routing with react-router v6.

I have built a container app which pulls in several remote applications as micro-frontends, using Webpack/Module Federation. I have successfully set up nested routing between the container and remotes using the basename attribute on the <BrowserRouter> in my remote application. I can access all of the routes within the remote apps, from the container and in the standalone remote, no problem.

My issue is specifically with Dynamic routing. So, a URL like the following, where 12345 is a User ID:

https://containerApp.com/remoteAppRoute/users/12345

In my remote application, I have just 2 routes - the users list page, and the User detail page:

<BrowserRouter basename="users">
  <Routes>
    <Route index element={<UsersIndexPage />} />
    <Route path=":userId" element={<UserProfile />} />
  </Routes>
</BrowserRouter>

In my container application, I can navigate from /users to /users/12345 by clicking on User-12345’s row on the list page. So, everything to this point works as expected. I can browse users in my remote application, from the container, and each user will end up with its own URL based on their ID, as long as I access them from the /users page.

The problem only occurs when I try to hit one of these dynamically generated routes directly, from the container application. Trying to navigate directly to https://containerApp.com/remoteAppRoute/users/12345, or refreshing the page once I have reached it organically from within the application, causes a blank page. I can hit the URL directly in the standalone remote application, and refreshing works. The problem only occurs in the container application.

I know for a fact the issue is the dynamic routes because when I explicitly register users/12345 as a Route in the container, I can hit it in the container directly and refresh the page and it works as expected. Here is what I did to make one of these routes show up for a single user:

<DataBrowserRouter fallbackElement={<CircularProgress />}>
  <Route path="/" element={<Dashboard />} >
  <Route path="users" element={<Suspense fallback="Loading..."><UserManagementApplication /></Suspense>} />
  
  {/* Hack/Fix for container */}
  <Route path="users/12345" element={<Suspense fallback="Loading..."><UserManagementApplication /></Suspense>} />
  .....
</DataBrowserRouter>

Clearly, we cannot use this as a solution as we will have countless users, with dynamically generated IDs.

QUESTION: Is this dynamic routing architecture currently supported in Module Federation? If so, how can I accomplish what I’m trying to do here? Please let me know if my question is unclear - I would be happy to set up a repository to help reproduce the issue, if you have not encountered it before.

[BenByrdInMarket]

Thanks @pavandv ! Sorry for obfuscating the code like this - the information you’ve provided will be sufficient for me to solve this problem, especially knowing that this sort of pattern should definitely work. Likely there is some small misconfiguration on my end, which I will track down! Thanks again.

[BenByrdInMarket]

Following up - the wildcard route did the trick! Can’t believe we didn’t think of that, Lol. Appreciate your help and timeliness in responding!!