reactjs - Navigate to sibling Routes's Route without page reload in React router 6

Question

Let me present my problem, I have two subdomains in the same react SPA codebase, say abc.domain.com and xyz.domain.com I've logically separated the Route block inside Routes for both subdomains. This is my code at the root level

<BrowserRouter>
        <div>
          {isabcSubdomain() && <AbcSubDomainApp />}
          {isxyzSubdomain() && <XyzSubDomainApp />}
        </div>
</BrowserRouter>

Inside AbcSubDomainApp

<Routes>
    <Route path="a" element={<A/>}/>
    <Route path="b" element={<B/>}/>
</Routes>

Similarly, inside XyzSubDomainApp

<Routes>
    <Route path="x" element={<X/>}/>
    <Route path="y" element={<Y/>}/>
</Routes>

Now, I am at abc.domain.com/a and want to navigate to xyz.domain.com/x without any page reload, just with a button trigger (say), is there any way to achieve this?

question from:https://stackoverflow.com/questions/66046842/navigate-to-sibling-routess-route-without-page-reload-in-react-router-6

Answer 1

This is not possible, but not only because it is not supported in React.

Each time a browser detects a change to a new domain (subdomains too), a request to a DNS server is triggered (it may be cached but the request is always made), and the browser will then treat the content as coming from a different source.

This happens for very good reasons.

1. If you were to suddenly switch domains without reloading, how would the browser know which site data to use?
2. If you switched domains without realizing, you might accidentally enter private information into the wrong website!

I recommend you do not pursue this functionality within your website. Having two copies of the exact same code on different websites is not a good solution.