react-router-dom v6

멋쟁이 사자처럼 프론트엔드 스쿨에서 진행한 팀프로젝트인 '감귤 마켓'을 리엑트로 리펙토링하는 과정에 react-router-dom이 최근 v6로 바뀌어서 약간 애를 먹었기에 미래의 나를 위해 정리한다.

1. Switch -> Routes

드림엘리 강의에서 Switch로 배웠는데 auto import도 먹지 않고 직접 임포트를 작동하여도 'Switch' is not exported from 'react-router-dom'라는 에러를 뿌려줄 뿐이었다. 이것 때문에 현재 v6가 생겼다는 것을 알게 되었다. 간단하게 Switch는 Routes로 네이밍이 변경되었다. Route들을 감싸고 있기 때문에 Routes가 더욱 의미있는 네이밍 인 것 같다.

2. Route의 옵션

먼저 exact가 삭제되었다. 이제는 path 옵션에 들어있는 url이 정확하게 매치해야 해당 컴포넌트를 랜더시켜준다. 두번째로 component 옵션이 element로 바뀌었다. path를 안쓰고 가장 아래에 두던 not-match 도 path="*" 를 써주어야 작동한다.

      <BrowserRouter>
        <Layout>
          <Routes>
            <Route path="/" element={<Feed />} />
            <Route path="/chat" element={<div>chat</div>} />
            <Route path="/upload" element={<div>upload</div>} />
            <Route path="/mypage" element={<div>mypage</div>} />
            <Route path="/search" element={<div>search</div>} />
            <Route path="*" element={<div>404</div>} />
          </Routes>
        </Layout>
      </BrowserRouter>

3. useNavigate

팀프로젝트를 진행할 때 바닐라 js를 사용하였기 때문에 한 로직이 종료되고 다른페이지로 이동시킬 때, location.href를 사용하였는데 리엑트에서는 먹지 않았다. 그래서 찾아보니 useLocation 라는 것을 import하여 사용한다 하여 사용해보려 하니 또 자동완성이 되지 않았고 작동하지 않았다. 다시 알아보니 v6에서 useNavigate()로 기능이 통합되었다는 것을 알게되었다.

import React from "react";
import { useNavigate } from "react-router-dom";

const Feed = () => {
  const navigate = useNavigate();
  return (
      <>
      	<button onClick={() => navigate(-1)}>
        	이전페이지
        </button>
        <button onClick={() => navigate("/")}>
        	홈
        </button>
        <button onClick={() => navigate("/search")}>
        	검색
        </button>
        
      </>
  );
};