Nested Routes in Remotes

[tuucan]

Is it possible to use nested routes inside remote apps?
Using Route from a shared instance of react-router doesn't seem to recognize app-shell's Router.
And if remote-app defines its own Router, then app shell can't track page redirections.

Do you have any recommendations for this?

[XiaofengXie16]

I am not 100% sure if this applied to your use case. I have an app shell and multiple remote apps and each remote app has its own instance of react router and own set of routes. I use react-router 6 and pass the useNavigate function from the app shell to the remote apps so that app A can navigate to app B via the route handler provided by the app shell.

useNavigate: https://reacttraining.com/blog/react-router-v6-pre/

[athapliyal]

@XiaofengXie16 thanks, can you share how you are passing useNavigate down to remote apps? Is it via props, context or shared section in webpack?

[XiaofengXie16]

@XiaofengXie16 thanks, can you share how you are passing useNavigate down to remote apps? Is it via props, context or shared section in webpack?

I passed useNavigate as props from the shell to the remotes .

[w3nda]

@XiaofengXie16 do you use BrowserRouter both in the remote and the host? do you have any recommendation on which routers to use?

[ilumin]

It is possible to use nested routes. Just config react-router-dom as singleton (example: https://github.com/ilumin/poc-react-module-federation/blob/master/shell/webpack.config.js#L82-L84) and you can use nested routes and also use hook like useNavigator.

[hans-ts]

Is this still the case? I am using module federation with react-router-dom marked as a singleton and when I try to use useNavigate inside my remote it generates an error saying it may only be used in the context of a router component (which is in the host application).

[elliottdaviess]

Add another browser router component in the remote MFE's bootstrap.tsx/jsx file, with a basepath prop that matches the route it is rendered on in the host.

When you add it to the bootstrap file, it is only rendered when running the remote standalone, and the basepath will ensure that the navigation hooks behave identically regardless of whether the remote MFE is running standalone or within the host

[hans-ts]

But that still results in the useNavigate error when the remote is run inside the host.

[elliottdaviess]

I'd recommend taking a look at using Nx to create your apps for you - they take care of the module federation setup on your behalf with a few simple command params. You can set up routes in the remote via a command line flag when creating the workspace too.

You'll want to opt for the dynamic flag in the host if you don't intend on colocating the apps in the same repo.

https://nx.dev/nx-api/react

[hans-ts]

Actually, I was able to resolve the issue! You see, the parts that were calling useNavigate where importing it from react-router, not react-router-dom, and react-router was not flagged as a shared module. Importing everything from react-router-dom fixed the issue.

I do want to express my gratitude for your help though!

[khanzzirfaniag]

I think the useNavigator works once the routes are loaded by the host container or child app. but not working when you use it as deep-link. Can any one suggest if the deep links works as remote urls for MFEs?

https://stackoverflow.com/questions/72768822/micro-frontend-by-module-federation-with-react-router-dom-v6