React) react-router-dom 특정 경로에서만 특정 컴포넌트 랜더링 되게 하기

React) react-router-dom 특정 경로에서만 특정 컴포넌트 랜더링 되게 하기

저는 주로 프로젝트의 최상위 요소인 App 요소ㄹㄹ BrowerRouter로 만들어 사용하는데 이때, Header 와 Footer는 모든 경로에서 고정된 위치에 있게 하기 위해서 Route로 설정하지 않고 그냥 최상단에 header를 최하단에 footer를 위치시켰습니다.  

그런데 하다보니 특정 path에서 footer를 렌더링하고 싶지 않아져서 고민하다가 찾아낸 방법을 공유합니다. 

 

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

import Header from './static/component/header';
import Footer from './static/component/footer';

import exampleComponent1 from './exampleComponent1';
import exampleComponent2 from './exampleComponent2';
import exampleComponent3 from './exampleComponent3';


const routes = [
  {key: '1', path: '/1'},
  {key: '2', path: '/2'},
  {key: '3', path: '/3'},
];

const App = () => {
  return (
    <div className="App">
      <BrowserRouter>
          <Header language={language}/>
          <Route path='/1' exact render={() => <exampleComponent1 />} />
          <Route path='/2' exact render={() => <exampleComponent2/>} />
          <Route path='/3' exact render={() => <exampleComponent3 />} />

          {routes.map((r) => r.path!=='/' && <Route path={r.path} key={r.key} render={() => <Footer />}/>)}
      </BrowserRouter>
    </div>
  );
}

export default App;

 

위와 같이 routes라는 배열을 만들어 map 함수를 써서 제외하고 싶은 경로 이름과 일치하는 경우를 제외하고 Route를 해줍니다 .