Netlify Redirect from one netlify site to another netlify site is not working

Support
1

PLEASE help us help you by writing a good post!

  • we need to know your netlify site name. Example: gifted-antelope-58b104.netlify.app

I have two React webapps that I host on netlify. The first one we can say is prod, (https://friendly-dasik-a8ea42.netlify.app/), the second one we can say is beta/staging, (https://nimble-trifle-f2587c.netlify.app/).

I would like when I click on a link on the prod webapp to redirect me to the second one. However when I click on the link to /beta it does not redirect me to the beta site (I use react router). I need to directly access the site by pasting the /beta url to the address box and hit enter to go to it and have the redirect be active.

I’d also like if the beta site doesn’t have beta in the url to redirect me back to the prod site. I am having trouble coming up with a redirect rule to cover this case.

Is this possible?

  • DNS issues? Tell us the custom domain, tell us the error message! We can’t help if we don’t know your domain.
  • Build problems? Link or paste the FULL build log & build settings screenshot

The better the post - the faster the answer.

prod redirect rule:

# http and https need separate rules if you don’t force_ssl!
https://friendly-dasik-a8ea42.netlify.app/beta/* https://nimble-trifle-f2587c.netlify.app/beta/:splat 301!
/* /index.html 200

staging redirect rule:

https://nimble-trifle-f2587c.netlify.app/beta/* index.html 301!
https://nimble-trifle-f2587c.netlify.app/* https://friendly-dasik-a8ea42.netlify.app/:splat 200

The reasoning behind this is that we want to have two separate repos to rebuild an app and have both of them be live and working with each other. Is there just another better way to do this?

Thank you!

2

This is a problem of React Router. It doesn’t refresh the page. It adds a click event listener which prevents the default action of the browser:

image
image794×502 45.9 KB

If the request is sent to Netlify, that is if you go here directly: https://friendly-dasik-a8ea42.netlify.app/beta, you can see Netlify redirects as expected.

This is not possible using standard redirects, at least not the way you describe. You can try using Edge Functions to achieve that.

3

Is there a way once I proxy to the other site for the url not to change to the new one?

When I click on a button that brings me to the other app, and once in the other app I click on a button. It then changes the url like I am in that application.

Is there also a way to maintain auth0 access between two apps?

Thank you for your help, very much appreciated!

4

I’m sorry to say, I don’t think I understand any of your questions (at least not completely).

That’s what proxy does, doesn’t it?

All of this sounds like your React Router issue, or in short, JavaScript based navigation problems. Since the file for the route is not requested from the server once the app loads, there’s nothing Netlify can do about it.

Not sure, does Auto0 allow any such feature? Sounds like a question for Auth0 instead of Netlify, unless you know the exact feature which Auth0 provides and you just wish to ask how to implement it on Netlify. We can refer to the documentation and try to give a theoretical answer in that case.