168日目-特定の画面のFooterを非表示

特定の画面でFooterを非表示にする
最終プロジェクトcloudi中にFooterに問題が発生しました.
reactでSPAを実装するため、スイッチの外にFooterを配置するため、不要な部分でもFooterがレンダリングされます.
TimeKeeperを例に、App.jsを構成しています.

// App.js

import { BrowserRouter, Route, Switch } from 'react-router-dom';

function App () {
  return (
    <>
    	<BrowserRouter>
    		<Header />
    		<Switch>
    			<Route exact path='/'>
    				<Main />
    			</Route>
    			<Route path='/alarm'>
    				<Alarm />
    			</Route>
    			<Route path='/timer'>
    				<Timer />
    			</Route>
    		</Switch>
    		<Footer />
    	</BrowserRotuer>
    	
    </>
    );
}

HeaderコンポーネントとFooterコンポーネントを切り替えることで、ページ変更時の再レンダリングを回避できます.
しかし、ティマーページでFooterを見せたくなければ、できませんでした.
その後、本のタイトルを作っている間に以下のブログを見つけました.
Headerを特定の画面で非表示にするに基づいてFooterを非表示にします.
じっこうほう
TimerページでFooterを非表示にするには、Footerコンポーネントに次のコードを記述します.

// Footer.js

const Footer = () => {
  if (window.location.path === '/timer') return null;
  return (
    <>
    	...컴포넌트들
    </>
    );
}