加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 20:50:46 所属栏目:百科 来源:网络整理
导读:我有一个需要一段时间才能加载的组件.实际上,它是一个加载 iframe的组件.另一个网站,需要一段时间才能加载. 我希望组件能够挂载并因此运行加载iframe的componentDidMount代码块,以便当用户点击“创建”选项卡时,用户立即在正确的 main中看到iframe.页面的一
我有一个需要一段时间才能加载的组件.实际上,它是一个加载< 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} />

我怎样才能做到这一点?

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

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

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读