React Router - Kopf- und Fußzeile ausblenden, wenn in iFrame gerendert

Question

Ich habe eine react App mit create-react-app erstellt. Das ist mein 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') 
); 

Ich brauche die URL /jobs/:url in einem iframe auf einer externen Website gerendert werden. Wie schließe ich die <Header/> und <Footer/> für diese Ansicht aus?

Answer 1

Diese Lösung arbeitet schließlich für mich:

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

sehen aus wie die richtige Art und Weise ist, dass Sie innerhalb Sie Router Handy-Header zu setzen:

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

In Ihrem Header-Komponente verwenden diese die verschachtelten Komponenten zu machen. {this.props.children}

So können Sie eine gleiche Komponente zu Header und Footer verwenden, und den Körper zwischen diesen beiden rendern.

Sagen Sie, ob es funktioniert hat. ;)

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