reactjs - Is it possible to navigate across different sub-domains or base URLs in same application without refreshing the page in React?

Question

I used react-router for navigation. I used props.history.push(url) but it just appends the provided url in existing url.

Example- current URL of browser - http://my-app1.example.com:3000/about

Action to be performed - navigate to http://my-app2.example.com:3000/contactUs without refreshing the page.

To solve above problem I tried following piece of code.

let url = 'http://my-app2.example.com:3000/contactUs'
props.history.push(url)

Result- Browser URL turns to http://my-app1.example.com:3000/about/http://my-app2.example.com:3000/contactUs

I tried using <Link /> still it didn't worked.

Possible solution is to use <a> tag or use window.location.href = url but it refreshes the page.

Finally, my requirement is to navigate to a url with different sub-domain without refreshing the page in a react web-app.

Could anyone suggest a possible solution for the same.

Answer 1

If you are pointing to another app - your routing will not work and you will have to refresh the page You can create a routing wrapper app for both apps and render them inside, but without that - it will rerender