migration-example

1-src-index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import App from './App';
import NewPage from './NewPage';
import OldPage from './OldPage';
import './index.css';

ReactDOM.render(
  <Router>
    <Switch>
      <Route path="/new" component={NewPage} />
      <Route path="/old" component={OldPage} />
      <Route path="/" component={App} />
    </Switch>
  </Router>,
  document.getElementById('root')
);

2-src-NewPage.js

import React from 'react';

const NewPage = () => {
  return (
    <div>
      <h1>New Page</h1>
      <p>This is the new page.</p>
    </div>
  );
};

export default NewPage;

3-src-OldPage.js

import React, { useEffect } from 'react';

const OldPage = () => {
  useEffect(() => {
    // Check if the other app is already initialized
    if (!document.getElementById('other-app-root').hasChildNodes()) {
      // Dynamically load and initialize the other React app
      const script = document.createElement('script');
      script.src = '/other-app/main.js'; // Path to the built other React app's main script
      script.onload = () => {
        window.initializeOtherApp(); // Assuming the other app exposes this function to initialize itself
      };
      document.body.appendChild(script);
    }
  }, []);

  return (
    <div>
      <h1>Old Page</h1>
      <div id="other-app-root"></div>
    </div>
  );
};

export default OldPage;

4-other-app-src-index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

window.initializeOtherApp = () => {
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('other-app-root')
  );
};