将现有组件（ref）渲染为路线

Question

问题

我们的应用程序注入了其他使用iframe渲染的应用程序，用户可以通过标签菜单访问这些应用程序。显然，iframe src请求可能会花费一些时间，并且当用户单击选项卡时执行请求是不理想的。

该应用程序应看起来像它是我们应用程序的一部分-即完全无缝并且是我们捆绑包的一部分。

---

我尝试过的-浏览器缓存

只需在应用加载时调用IFrame URL，浏览器就会为每个应用缓存大部分所需资源。

为此，我创建了一个简单的组件，该组件使用所需的应用程序URL呈现IFrame。

const PreloadIframe = props =>
  (
      <iframe
        src={props.url}
      ></iframe>
  );

然后，当应用加载时，我将此组件呈现为 display：none 。而且，当用户单击所需的标签以加载 real iframe时，该捆绑包已被缓存，并且过渡 几乎 似乎没有。< / p>

该解决方案存在的问题

• 客户端向应用程序URL发出2个请求，一次请求进行缓存，另一次何时实际显示

这取消了缓存可能提供的任何优化，因为用户在使用注入的应用程序之前仍必须等待Web服务的响应。

---

理想

我想在用户单击适当的标签时将<PreloadIframe/>组件设置为可见。

是否可以使用 Route.render()或 Route.component

要呈现现有组件，即DOM中当前存在的组件？