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?
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?
