React Router v4 - 无需渲染的预安装组件

Question

我有一个需要一段时间才能加载的组件.实际上,它是一个加载<iframe>另一个网站的组件,需要一段时间才能加载.

我希望组件能够挂载,因此运行加载iframe的componentDidMount代码块,这样当用户点击"创建"选项卡时,用户立即<main>在页面的正确部分看到iframe .

有没有办法指示react-router 预加载组件,同时在路由更改时保留相同的条件呈现逻辑并保留呈现组件页面上的位置？

这是我目前render()在应用程序根目录上的声明,为您提供一些上下文:

render() {
  return (
    <div className="App">
      <Nav />
      <Snackbar
        open={this.props.snackbar.get().open}
        message={this.props.snackbar.get().message}
        autoHideDuration={4000}
        onRequestClose={() => this.handleSnackbarRequestClose()}
      />
      <TreeViewer />
      <PayloadListener/>
      <main>
        <ThankYouModal open={this.props.showConfirmationModal.get()} handleClose={ () => this.props.showConfirmationModal.set(false) }/>
        <Switch>
          <Route path="/imageservices" component={ImageServicesController} />
          <Route path="/create"        component={Iframe} />
          <Route exact path="/account" component={Account} />
          <Route exact path="/analytics" component={AnalyticsController} />
          <Route path="/support"       component={SupportView} />
          <Route path='/login'         render={ (props) => <Login { ...props } /> } />
          <Route path='/logout'        render={ (props) => <Logout { ...props } /> } />
        </Switch>
      </main>
    </div>
  );
}

这是我希望React Router预加载的组件:

<Route path="/create" component={Iframe} />

我怎样才能做到这一点？

Answer 1

好吧,如果你看一下React组件生命周期,你会发现渲染总是在componentDidMount之前运行.因此,如果没有渲染它,您将无法安装组件.

这些是安装时调用的生命周期方法:

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

你可以尝试一些事情:

• 在需要时渲染iframe,并在加载时淡入淡出.

您可以轻松地为iframe 的load事件添加eventListener,并在状态更改时对其进行适当的更改以淡入淡出.

...
componentDidMount() {
  this.iframe.addEventListener("load", this.handleLoad);
}

componentWillUnmout() {
  this.iframe.removeEventListener("load", this.handleLoad);
}
...
<iframe ref={ref => this.iframe = ref } />
...

当我不总是需要iframe时,我已经这样做了.这是零星的事情,总是一页似的事情.

• 您可以使用preload属性

如果您知道用户会偶然发现iframe内容,这是理想的选择.您可以开始预加载用户最有可能遇到的内容,从而阻止用户等待.

您可以将其添加到文档的头部:

<link rel="preload" href="your-doc-url" as="document" />

然后通常使用你的iframe:

<iframe src="your-doc-url"></iframe>

如果您的iframe网址是动态的,并且依赖于经过身份验证的用户的某些信息,并且您无法立即将其放入您的html文件中,请记住,只要您拥有所需信息,就可以始终使用react-helmet将其呈现给head标记.

Answer 2

不是通过react-router,但您可以link preload as document在您index.html的文件中使用以确保浏览器延迟加载文档.它的目的是预加载可以在iframe中显示的文档.您也不需要更改路由器机制.

在这里阅读更多相关信息 - https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content.

基本上,只需将其添加到head您的index.html:

<link rel='preload' href='your_iframe_url' as='document'>