我有一个需要一段时间才能加载的组件.实际上,它是一个加载< 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} />
我怎样才能做到这一点?