These applications are hosted in separate repos and I’m trying to bind the proxy by using the following method in netlify.toml in the main repo.
[[redirects]]
from = "/redirect/*"
to = "https://redirect-app-site-2.netlify.app/:splat"
status = 200
force = true
[[redirects]]
from = "/*"
to = "/"
status = 200
However this redirect is failing and whenever I go to https://main-app.netlify.app/redirect I get a blank page.
It seems to redirect now to the target link, but there’s some mismatch in the served file. I’m using React router to do navigation in site 2 and there’s a catch-all route there for 404 pages. Even though I’m doing the redirection to the base url of site 2, it always shows that 404 page.
Going directly to https://redirect-app-site-2.netlify.app/ shows the correct page. Any way to debug which path is this redirection taking to?
In both the cases, I can see the same URL getting hit in the network tab: https://redirect-app-site-2.netlify.app/static/js/main.e86652d1.js - showing error in the first case while shows correct page in the second.
Oh I see, what the problem is here. This is React Router (RR) messing up. Since RR depends on the location property, it reflects the changes in the address bar. So what is happening here is:
When you go to site1.com/somepage, Netlify rewrites that URL to site2.com. Then, React starts its processing and sees that the address bar has path as somepage. It tries to find your component for somepage. It finds none, and uses your 404 component as the fallback.
Instead, you should set the correct component for somepage path also.
Thanks a bunch Hrishikesh! Indeed react router was playing havoc with the entire system.
Additionally, instead of changing base tag, I set PUBLIC_URL environment variable, to make it easier to change this on the fly. Now everything is working correctly
