[React] react-router-dom v6 특정 컴포넌트 숨기기

진행중인 프로젝트에서 로그인 페이지와 같은 페이지에서는 네비바를 숨기는게 보기에 더 좋을 것 같다는 판단하에 특정 페이지에서만 네비바를 보여주게 만들어야 했다. 검색을 해보니 react-router-dom v5에서 적용하는 방법은 정말 많이 찾아볼 수 있었지만 프로젝트에서 사용중인 버전은 v6버전이고 바뀐 문법으로 코드를 작성해 주어도 생각대로 적용이 되지 않았다.

그러던 중 Outlet이라는 중첩 라우팅을 위한 컴포넌트를 발견해 코드를 작성해 보니 성공적으로 원하던 결과를 얻을 수 있었다.

💡 react-router-dom v5에서 처리 방법

---

우선 구글에 "리액트 특정 컴포넌트 숨기기" 라는 키워드로 검색을 하면 대부분 v5에서 이렇게 처리를 한다.

import React from 'react';

const App = () => {
 return (
   <BrowserRouter>
     <Switch>
	   //네비바를 숨기고 싶은 페이지
       <Route path="/login" component={LoginPage} />
       <Route path="/register" component={RegisterPage} />
       <>
         //네비바를 보여주고 싶은 페이지
         <Navbar />
         <Route path="/" component={MainPage} />
         <Route path="/search" component={SearchPage} />
         <Route path="/form" component={Form} />
       </>
	 </Switch>
    </BrowserRouter>
 );
};

export default App;

Switch 컴포넌트 안에 네비바를 숨기고 싶은 페이지와 보여주고 싶은 페이지를 Fragment 컴포넌트로 분리시켜 묶으면 <Navbar/> 컴포넌트가 있는 Fragment 안에 있는 컴포넌트들만 네비바가 출력된다는 것이다.

하지만 v6로 오면서 Switch는 Routes로 바뀌게 되었고 구조를 그대로 유지한채 Switch를 Routes로 바꾸어 코드를 작성해 보았지만 오류 메세지가 뜨면서 적용이 되지 않았다.

💡 window.location.pathname

---

다음으로 검색 결과로 많은 해결책은 window.location.pathname을 활용하는 것이다.

const Navbar = () => { 
  if (window.location.pathname === '/네비바를 안보이게 하고자 하는 주소') 
    return null; 
  return ( <네비바 코드> ); 
}

네비바 코드에 숨기고자 하는 컴포넌트의 정의된 path 주소를 window.location.pathname과 일치하면 null을 리턴하게 코드를 작성하면 그 컴포넌트에서는 출력되지 않는다는 것이다.
이 방법은 처음 렌더링 됐을 때가 아닌 새로고침을 해야 적용이 되어서 원하는 결과가 아니였다. (이유는 모르겠음)

💡 Outlet

---

최종적으로 원하는 결과를 얻은 Outlet 컴포넌트이다.

//App.js
import React from 'react';

const App = () => {
 return (
   <BrowserRouter>
     <Routes>
   //네비바를 보여주고 싶은 페이지
   <Route element={<Navigate />}/>
   <Route path="/" element={MainPage} />
   <Route path="/search" element={SearchPage} />
   <Route path="/form" element={Form} />
   </Route>
   //네비바를 숨기고 싶은 페이지
   <Route path="/login" element={LoginPage} />
   <Route path="/register" element={RegisterPage} />
	 </Routes>
   </BrowserRouter>
 );
};

export default App;

//Navigate.js
import {Outlet} from "react-router"

const Navigate = () => {
  <>
    //네비바 코드
    <Outlet />
  </>  
}

Outlet은 위에서 정의한 네비바를 보여주고 싶은 NavBar route의 하위 route들의 모음이다.

네비바를 보여주도록 설정한 Main.js

네비바를 숨기도록 설정한 Login.js

• (velog 글 참조 : https://velog.io/@nemo/React-Router-v6-hide-component)