0

Just for example If I have URL www.testonly.com with 3 different ports 3000, 3001, 3002

Then I have app running on port 3000 and 3001 Now I want to access any component from the app running on port :3001 in the app running on :3000

Is it possible to do so, will cross-origin policy has something to do with it, how I will be able to achieve this kind of functionality

Also I don't want to use <iframe /> html tag for this, as any changes in the origin component will affect every component where I am using <iframe />

I want to achieve something like below 

      <Router>       
         <Route path="/test" render={(props) => <ComponentFromOtherPort {...state} {...props} />} />         
      </Router>

  1. Here <ComponentForOtherPort /> is the component whose code is running on port :3001

  2. React routers are present on the app running on port :3000

Every time, I want to send different values with <ComponentForOtherPort /> and on that component I want that props to be used something like below.

//code on :3001
class ComponentForOtherPort extends React.Component{    
componentDidMount(){    
 //props 
 console.log(this.props);
 }
}
Adarsh
  • 474
  • 1
  • 9
  • 17
  • 2
    That's a strange use-case, but I think what you need here is a dynamic import from a URL which ES modules don't support, so you'll have to look for a different solution - https://stackoverflow.com/questions/50097327/using-a-full-url-in-a-dynamic-import. I am still unclear what you want to do exactly, but using what I just mentioned wouldn't affect components running on `3001` if you use them on `3000`. You won't have the ability to share `state` between `3000` and `3001`, for example, if that's what you're aiming at - **this is not possible** by using just `React` and dynamic imports. – goto Mar 08 '20 at 11:35
  • Hello @goto1, thanks for the suggestion, I'll try to implement it with the help of dynamic import as suggested by you, maybe that can work :) – Adarsh Mar 14 '20 at 10:48

0 Answers0