I have a React page that uses an iframe to show a map with various points marked on it.

The map uses various external scripts, so I’ve created it inside an iframe that points to an index.html file inside the public folder of my React project.

 <MapWrapper>
    <iframe
      src="/map/index.html"
      title="map"
      style={{
        height: '100vh',
        width: '100vw',
        border: 'none',
      }}
    />
  </MapWrapper>

When I navigate to the map page inside the app, the relevant React Route works as expected, and I can view the map inside one of my app’s pages. (e.g. localhost:3000/map).

If I reload this page, instead of seeing the map render as part of the page, I just get the map. There is a trailing slash added to the path (e.g. localhost:3000/map/), so I’m assuming the index.html page is just being rendered as-is.

How do I keep the map inside its React page on reload?