React Router - 在 iF​​rame 中呈现时隐藏页眉和页脚

Question

我有一个使用 create-react-app 构建的 react 应用。这是我的 index.js

export class MyRoutes extends React.Component{
    render(){
        return(
            <div>
                <Route exact path='/' component={ Home }/>
                <Route path='/team' component={ Team }/>
                <Route path='/career' component={ Career }/>
                <Route path='/faq' component={ Faq }/>
                <Route path='/contact' component={ Contact }/>
                <Switch>
                    <Route exact path='/jobs' component={ JobHome } />
                    <Route path='/jobs/alle' component={ JobList } />
                    <Route path='/jobs/:url' component={ JobDescription } />
                </Switch>
            </div>
        )
    }
}

ReactDOM.render(
    <Router>
        <div>
            <Responsive minWidth={768}>
                <Header/>
                <MyRoutes/>
            </Responsive>

            <Responsive maxWidth={767}>
                <MobileHeader
                    routes={<MyRoutes/>}
                />
            </Responsive>
            <Footer />
        </div>
    </Router>,
    document.getElementById('root')
);

我需要在外部网站的 iframe 中呈现 url /jobs/:url。 如何在此视图中排除 <Header/> 和 <Footer/>？

Answer 1

这个解决方案终于对我有用了：

const MyRoutes = () => (
    <div>
        <Route exact path='/' component={ Home }/>
        <Route path='/team' component={ Team }/>
        <Route path='/career' component={ Career }/>
        <Route path='/faq' component={ Faq }/>
        <Route path='/contact' component={ Contact }/>
        <Switch>
            <Route exact path='/jobs' component={ JobHome } />
            <Route path='/jobs/alle' component={ JobList } />
            <Route path='/jobs/:url' component={ JobDescription } />
        </Switch>
        <Route path='/xing_jobs/:url' component={ JobDescription }/>
    </div>
)

export let App = (props) => {
    let location = props.location;
    let isXingUrl = location.pathname && location.pathname.match(/^\/xing_jobs/);
    console.log('isXingUrl', isXingUrl);

    return (
        <div>
            <Responsive minWidth={768}>
                {!isXingUrl && <Header/>}
                <MyRoutes/>
            </Responsive>

            <Responsive maxWidth={767}>
                <MobileHeader
                    showHeader={!isXingUrl}
                    routes={<MyRoutes/>}
                />
            </Responsive>
            {!isXingUrl && <Footer/>}
        </div>
    )
}
App = withRouter(App);

ReactDOM.render(
    <Router>
        <App />
    </Router>,
    document.getElementById('root')
);

Answer 2

看起来正确的方法是将移动标头放入路由器中：

<Route path="/jobs/..." component={ComponentwithoutHeader}>
<Route path="/" component={Header}>
...Routes wit header
</>

在您的标题组件中使用它来呈现嵌套组件。 {this.props.children}

这样你就可以对 Header 和 Footer 使用相同的组件，并在这两者之间渲染 body。

告诉它是否有效。 ;)

Answer 3

export class MyRoutes extends React.Component{
    render(){
        let {path} = this.props.matc
        let routes = (
            <div>
              <Switch>
                <Route path='/team' component={Team}/>
                <Route path='/career' component={Career}/>
                <Route path='/faq' component={Faq}/>
                <Route path='/contact' component={Contact}/>
                <Route exact path='/jobs' component={JobHome}/>
                <Route path='/jobs/alle' component={JobList}/>
                <Route path='/jobs/:url' component={JobDescription}/>
                <Route exact path='/' component={ Home }/>
              </Switch>
            </div>
        )
        return (
          <div>
            <Responsive minWidth={768}>
                {path != '/jobs/:url' && <Header/>}
                {routes}
            </Responsive>

            <Responsive maxWidth={767}>
                <MobileHeader
                    routes={routes}
                />
            </Responsive>
            {path != '/jobs/:url' && <Footer/>}
        </div>
        )
    }
}




ReactDOM.render(
    <Router>
        <Route exact path='/' component={ MyRoutes }/>
    </Router>,
    document.getElementById('root')
);