iframe-example.js

import React, { useEffect, useRef } from "react";
// import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
// import PeoplePage from "./people-page/people-page.component.js";

export default function Root(props) {
  const iframeRef = useRef()
  useEffect(() => {
    setTimeout(() => {
      iframeRef.current.contentWindow.postMessage(
        { source: 'quicksilver', pathname: window.location.pathname.replace('/people/', '') },
        'http://localhost:4200'
      );
    }, 1000)
  }, [])
  useEffect(() => {
    function listen (event) {
      if (event.origin.includes('localhost:4200')) {
        console.log('change url to', event.data.pathname)
      }
    }
    window.addEventListener('message', listen)

    return () => window.removeEventListener('message', listen)
  }, [])
  return (
    <iframe
      ref={iframeRef}
      className='h-screen'
      id='angular-iframe-tour'
      src='http://localhost:4200'
      width='100%'
    />
    // <BrowserRouter>
    //   <Route path="/people/:personId" component={PeoplePage} />
    //   <Route path="/people" component={PeoplePage} exact />
    // </BrowserRouter>
  );
}