React-Router和iFrames

Question

当从iFrame调用ReactJS应用程序时，是否可以在React-Router中执行一些规则以仅显示某些路由？

我有以下路线，您可以观察到，这些路线将始终显示<Header />和<Footer />组件：

...
<Route component={Header} />
<Route exact path="/" component={Landing} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route component={Footer} />
...

但是，当有人将我的应用程序从iFrame嵌入到他的网站（如小部件）中时，我不想显示<Header />和<Footer />组件，因此它的行为如下：

...
<Route exact path="/" component={Landing} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
...

Answer 1

维护状态或道具，以了解是否将其嵌入到iframe中。我在以下示例中使用了道具：

render() {
        return (
            <div>
                {this.props.inIframe !== null && this.props.inInframe !== true ? <Header /> : null}
                <Switch>
                    <Route exact path="/" component={Dashboard}/>
                    <Route path="/about" component={WebsiteEditor}/>
                    <Route path="/contact" component={WebsiteViewer} />
                </Switch>
                {this.props.inIframe !== null && this.props.inInframe !== true ? <Footer /> : null}
            </div>
        );
    }