React Router - iFrameでレンダリングしたときにヘッダーとフッターを非表示にする

Question

私はcreate-react-appで作成した反応アプリを持っています。これは私がURL /jobs/:urlは、外部ウェブサイトでiframe内にレンダリングする必要が私の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') 
); 

です。 このビューで<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}

このように、ヘッダーとフッターに同じコンポーネントを使用し、この2つの間で本文をレンダリングすることができます。

効果があるかどうかを確認します。 ;）

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