新しいレイアウトを作成せずにReact JSビューのいずれかでフッターを無効にするにはどうすればよいですか？

Question

同じレイアウトを使用する約20のビューがあります。今私はフッターを使用しない1ページが必要です。私が持っていた最初のアイデアは、新しいレイアウトを作成することですが、これはこれを行う良い方法のようには見えません。

レイアウト

const App =() => (
    <div className="full-container"> 
      <Router history={Router}> 
       <Main> 
        <STUFF HERE> 
       </Main> 
      </Router> 
      <Footer/> 
     </div> 
); 

VIEW

render() 
    { 
     return (
      <div> 
       <h1 className="section-smaller-title">TITLE</h1> 
       <STUFFHERE> 
       </div> 
      </div> 

     ); 
    } 

フッターのCOMPONENT

render() { 
     return (
      <footer> 
       <img alt="footer logo" className="footer-logo" src="imgsurl"/> 
      </footer> 
     ); 
    } 
} 

は、どのように私はそのビューでこのフッターを表示することはできませんか？ 私はどこでも

document.getElementByClassName(...) 

しかし、この無効にして、それを試してみました。

これを行う標準的な方法は何ですか？

Answer 1

条件付きレンダリングを使用できます。具体的には、論理的にはインラインif & &オペレータです。ただ、これにあなたのレイアウトを変更：https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-with-logical--operatorで条件付きのレンダリングについて

const App =() => (
    <div className="full-container"> 
    <Router history={Router}> 
     <Main> 
     <STUFF HERE> 
     </Main> 
    </Router> 
    {location.pathname !== “URL path where you don’t want to see footer” && <Footer/>} 
    </div> 
); 

詳細情報は、それが役立つことを願っています。