microfrontend

app.jsx

import React {useState, useEffect} from 'react';
import {Switch, Route} from 'react-router-dom';

function Frontend({manifest}){
  
  return <iframe src={manifest.url} />
}

function App() {
 const [manifest, setManifest] = useState();
 useEffect(() => {
  fetch('https://localhost/my-project/manifest').then(r=>r.json()).then(setManifest)
 },[]);
  
 if(!manifest){
   return <div>Loading</div>
 }

 return (
   <Switch>
     {manifest.apps.map(app => <Route to={app.route}><Frontend manifest={app}/></Route>)}
   </Switch>
 )

}

export default App;

manifest.json

{
    "apps":[
        {
            "id":"user-profile",
            "url": "http://localhost:3000/index.js",
            "route":"/profile"
        },
        {
            "id":"shop",
            "url": "http://localhost:3001/index.js",
            "route":"/ship"
        }
    ]
}