React-Router 和 iFrame

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>
        );
    }

React-Router 和 iFrame

React-Router and iFrames

reactjs

react-router-v4