Routing Integration Issue Between React Router and Tanstack Router in MFE
Description:
I am encountering a problem when integrating a Micro Frontend (MFE) that uses Tanstack Router into a legacy project that uses React Router. I set up a base path in the legacy project with React Router (/invoices) and expected the MFE to start from this base path. However, the MFE is still being rendered at the root path (/) of the legacy project, instead of using the configured base path.
Context:
Legacy Project: Uses React Router
MFE: Uses Tanstack Router
Configuration in the Legacy Project (React Router): A base path '/invoices' is set for the MFE
Configuration in the MFE (Tanstack Router): Initial route set as '/'
Problem:
Despite setting the base path /invoices in the legacy project, the MFE renders at the '/' path of the legacy project, instead of following the base path.
Steps to Reproduce:
Visit the '/' route in the legacy project.
The MFE should be rendered at '/invoices', but it appears at the '/'.
Expected Result:
When accessing the base path '/invoices' in the legacy project, the MFE configured with '/' in Tanstack Router should be rendered under this base path.
Actual Result:
The MFE is rendered at the '/' path of the legacy project, ignoring the base path /invoices.
Question:
How can I configure the Tanstack Router in the MFE to recognize and adhere to the base path set in the legacy project with React Router?
5 Replies
foreign-sapphire•16mo ago
On the TSR side of things, as long as you've set the
basePath on the in the RouterOptions when using createRouter, then all navigations via TSR's <Link> and useNavigate() calls, should have the basePath added on.
By default TSR's basePath is set to /.
Change this to whatever you need your base-path to be resolved to.passive-yellowOP•16mo ago
@Sean CassiereI did this, the problem is that when adding the base path it now redirects directly to the new path, it seems to be replacing everything
foreign-sapphire•16mo ago
what do you mean by its replacing everything?
Is TSR the child? or the parent project?
If its the child, set the basepath as
/invoices.
@Luiz Otávio will probably need a reproduction of your set up to understand where you are struggling here.passive-yellowOP•16mo ago
@Sean Cassiere This updates everything it is the child, I added the basePath as an invoice when I build it and import it as a component within the parent project, it replaces the parent's configs by searching for the child's path /invoices and loading it straight away
foreign-sapphire•16mo ago
A reproduction will be required here