React 활용 - 2 : React-router-dom(네비게이션) 특정 페이지에서 숨기기

이전 글에서는 리액트에서 페이지 공통 영역인 header를 생성하는 방법을 알아보았다.

 

이번에는 로그인 페이지 등에서 공통 영역(header, footer 등)을 숨기는 방법에 대해 알아보겠다.

 

우선 지난시간에 작성한 코드 중 Link 영역을 따로 분리하여 아래와 같이 Header.js 파일로 만들어준다.

 

import React from 'react';
import {
    Link
  } from 'react-router-dom';

function Header() {

    return (
      
      <div>
        <Link to="/FirstScreen">FirstScreen</Link>
      </div>
      
    );
  }


export default Header;

App.js에서는 해당 header를 임포트하여 추가한다.

 

import React from 'react';
import FirstScreen from './Screens/FirstScreen'
/*Header 파일 import*/
import Header from './Screens/Header'
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from 'react-router-dom';

function App() {
  return (
    <Router>
          {/* 실제 화면에 보여지는 태그, 클릭 시 주소창이 /FirstScreen으로 이동 */}
          {/* Header를 따로 모듈로 분리 */}
          <Header/>
          {/* 주소창 변함에 따라 화면을 해당 주소창에 맞게 변경해준다. */}
          <Routes>
            <Route path="/FirstScreen"  element={<FirstScreen />}></Route>
          </Routes>
    </Router>
  );
}


export default App;

 

header를 숨길 페이지를 생성한다. 아래와 같이 HeaderHideScreen.js 를 생성한다.

 

import React from 'react';

function HeaderHideScreen() {

    return (
        <div>
            HeaderHideScreen
        </div>
    );
  }
export default HeaderHideScreen;

해당 화면을 Header.js , App.js 에 추가한다.

 

Header.js

import React from 'react';
import {
    Link
  } from 'react-router-dom';

function Header() {
    return (
      
      <div>
        <Link to="/FirstScreen">FirstScreen</Link>
        <br></br>
        <Link to="/HeaderHideScreen">HeaderHideScreen</Link>
      </div>
      
    );
  }


export default Header;

 

App.js

import React from 'react';
import FirstScreen from './Screens/FirstScreen'
import HeaderHideScreen from './Screens/HeaderHideScreen'
import Header from './Screens/Header'
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from 'react-router-dom';

function App() {
  return (
    <Router>
          {/* 실제 화면에 보여지는 태그, 클릭 시 주소창이 /FirstScreen으로 이동 */}
          <Header/>
          {/* 주소창 변함에 따라 화면을 해당 주소창에 맞게 변경해준다. */}
          <Routes>
            <Route path="/FirstScreen"  element={<FirstScreen />}></Route>
            <Route path="/HeaderHideScreen"  element={<HeaderHideScreen />}></Route>
          </Routes>
    </Router>
  );
}


export default App;

 

아래와 같이 HeaderHideScreen 에 접속 시 공통 영역인 header가 포함된다.

해당 페이지에서 header를 숨기기 위해 Header.js 에 아래와 같이 추가한다.

 

const locationNow = useLocation();

현재 위치를 useLocation() 으로 가져오고, 

if (locationNow.pathname === "/HeaderHideScreen") return null;

현재 위치에 대한 조건을 걸어 header 대신 null 을 반환해준다.

 

 

 

import React from 'react';
import {
    Link,
    useLocation 
  } from 'react-router-dom';

function Header() {
    //현재 location 가져오기
    const locationNow = useLocation();

    //특정 페이지에서 안나오도록 처리
    if (locationNow.pathname === "/HeaderHideScreen") return null; 

    return (
      
      <div>
        <Link to="/FirstScreen">FirstScreen</Link>
        <br></br>
        <Link to="/HeaderHideScreen">HeaderHideScreen</Link>
      </div>
      
    );
  }


export default Header;

 

위와 같이 수정하면 아래와 같이 공통영역인 header 가 사라진다.

 

코드 바로가기