[ModuleFederation] Nested BrowserRouters in micro-frontends

[w3nda]

Hey everyone, I have brought up this question on ModuleFederation github, thought it worths a shot here as well.

In our company we are migrating all of our standalone frontend applications to a microfrontends solution using ModuleFederation and Webpack 5.

Until now each app was rendered indepently and had its own BrowserRouter.
Now we have a shell application which holds a "root" router to help navigate between remotes (react modules we call remotes)
and question is how should we handle the internal routing of each remote?

Here is our main router from the host (using v6) application that renders the sub remote applications:

<BrowserRouter>
  <Routes>
    <Route
      path="/appOne*"
      element={<RemoteComponentOne />}
    />
    <Route
      path="/appTwo*"
      element={<RemoteComponentTwo />}
    />
  </Routes>
</BrowserRouter>

And here is what each sub remote (some use v6, some use v5) application has as a router: (RemoteComponentOne)

<BrowserRouter>
  <Routes basename="/appOne">
    <Route
      path="projects/:projectId"
      element={<div />}
    />
    <Route
      path="users/:userId"
      element={<div />}
    />
  </Routes>
</BrowserRouter>

Is is a best practice to have nested BrowserRouters, do you have any other suggestions? thanks in advance!