Followup: Properly accomplish nested routing

[segundaestrella]

Followup on #536 Guys if i am not mistaken your approach for handle routing is:

At startup app shell fetch all routing from all remotes and compose the app routing tree.

Am I correct? But doesn't it impact the app init time? Having 10 remotes means 10 async calls to fetch the remoteEntry.js file of each remote, blocking the app startup.

[alex-vukov]

Do you have to show all 10 remotes on the same page? I guess not. You can have a router in the shell and lazy load each of your applications when you go to the respective page which shows it. Put another router in the remote so that you have 2 nested routers in one page. This way the parent router monitors the first half of the url path and the child router monitors the second one without overlap. Each router will have its own routes. If you are using React it helps if you use regular Router components and pass the history prop from the outer to the inner one. This way all your Links will work across the entire application.

[asnow73]

@alex-vukov , could you give a link to reproduce scenario which you described.

I have app shell and I need to have access to remote app in route 'appshell/app/{app_routes}'. In the same time app have own routing. When app`s routing fire, it replace 'appshell/app/{app_routes}' to 'appshell/{app_routes}'

[XiaofengXie16]

@alex-vukov , could you give a link to reproduce scenario which you described.

I have app shell and I need to have access to remote app in route 'appshell/app/{app_routes}'. In the same time app have own routing. When app`s routing fire, it replace 'appshell/app/{app_routes}' to 'appshell/{app_routes}'

If you are using react-router, I believe you can set "basename" in both remote's router and the host's router, that way, the /app path will not be removed when you change route.

[asnow73]

If you are using react-router, I believe you can set "basename" in both remote's router and the host's router, that way, the /app path will not be removed when you change route.

Thank you for quick answer! Seems that it is works. I send basename as param to remote app. Unfortunatelly it is not enough set "basename" only in app shell.

// App shell
import { Route } from 'react-router-dom';
import Start from 'fed/app';
...
<Route path="/app/*">
  <Start basename="/app" /> // <-- federated remote app
</Route>

// Remote app
<Router basename={basename}>
      ....
 </Router>

[XiaofengXie16]

If you are using react-router, I believe you can set "basename" in both remote's router and the host's router, that way, the /app path will not be removed when you change route.

Thank you for quick answer! Seems that it is works. I send basename as param to remote app. Unfortunatelly it is not enough set "basename" only in app shell.

// App shell
import { Route } from 'react-router-dom';
import Start from 'fed/app';
...
<Route path="/app/*">
  <Start basename="/app" /> // <-- federated remote app
</Route>

// Remote app
<Router basename={basename}>
      ....
 </Router>

Yes, you need to set it in BOTH app shell and the remotes. (I am sorry, if I didnt highlight that word in my previous comment)