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

前端之家收集整理的这篇文章主要介绍了reactjs – React Router v4 – 无需渲染的预安装组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个需要一段时间才能加载的组件.实际上,它是一个加载< 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'>

猜你在找的React相关文章