Multiple browser routers

Hello,

The approach which I saw in examples is where we share our routes through module federation and shell application handles the routing for all the apps.

But what if I only share a single component which has it’s own internal routing mechanism, and I don’t need to expose anything else. Is that possible. I tried by passing basename.

Routes work for remote application when run in standalone, but when it’s integrated to shell they don’t work.

for example: Shell application

<BrowserRouter>
 <Route path="/app/*">
          <RemoteAppl basename="app"/>
        </Route>
</BrowserRouter>

Remote Application

<BrowserRouter  history={history} basename={props.basename}>
 <div style={{width: '100%', marginTop: 10, padding: 10, border: '5px solid gray', height: '100%' }}>
          <ul style={{ display: 'flex', margin: 20 }}>
            <li>
              <Link to="/experience-1">Internal Link 1</Link>
            </li>

            <li style={{ marginLeft: 20 }}>
              <Link to="/experience-2">Internal Link 2</Link>
            </li>
          </ul>
          <Route path="/experience-1">
            <ShoppingList />
          </Route>
      </div>
</BrowserRouter>

I saw this thread, but couldn’t make anything out of it https://github.com/module-federation/module-federation-examples/issues/536

[XiaofengXie16]

Hi @adarsh0d

This example is probably what you are looking for: https://github.com/XiaofengXie16/module-federation-nested-react-router-v6

This approach will work with react-router v5 as well (In my company, I am using v5).

However, there is one caveat, if you want to do inter-app navigation, you will need to pass the navigation function (useNavigation for V6) from the app shell down to the clients.

[ScriptedAlchemy]

Send pr if it would make a good example