React router dom v5 -> v6 달라진 점

글쓴 개요 : 기존 react router dom을 설치 후 발생한 hook들의 오류로 인해 확인 결과,

v6로 업그레이드 되면서 변경 된 부분들이 생겨 작성하게 되었습니다.

 

사용 가능 버전 : React >= 16.8

 

1. Switch -> Routes로 네이밍 변경

2. exact 옵션 삭제

3. component={<COM/>} || render={()=><COM />} -> element={<COM/>} 형식으로 변경

4. path="/web/:id" -> path=":id"로 상대경로로 지정

5. useHistory -> useNavigate로 변경

 

// v5
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../Pages/Home";
import List from "../Pages/List";
import Detail from "../Pages/Detail";

const Router = () => {
  return (
    <BrowserRouter>
       <Switch>
        <Route path="/" component={() => <Home />} />
        <Route exact path="/web" component={() => <List />} />
        <Route exact path="/web/:id" component={() => <Detail />} />
        <Route component={() => <div>Page Not Found</div>} />
      </Switch>
    </BrowserRouter>
  );
};

export default Router;

변경 후 

// v6
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../Pages/Home";
import List from "../Pages/List";
import Detail from "../Pages/Detail";

const Router = () => {
  return (
    <BrowserRouter>
       <Routes>
       	<Route path="/" element={<Home />} />
        <Route path="web/*" element={<List />}>
          <Route path=":id" element={<Detail />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

v6부터는 navigate라는 명칭을 사용합니다. 
history.push와 history.replace 모두 navigate라는 명칭으로 사용합니다.
만약 replace 기능이 필요하다면, navigate(to, { replace: true })의 형태로 사용할 수 있습니다. 
state를 사용한다면 navigate(to, { state }) 의 형태로 사용할 수 있습니다. 
여기서 to는 <Link>에서 사용한 to=''와 동일한 내용을 넣으면 됩니다.
useHistory의 기능 중 { go, goBack, goForward }는 각각 해당 위치로, 이전으로, 다음으로의 
역할을 수행해왔는데, 이 부분도 navigate로 통일하고 index를 넣음으로써 해결합니다.
// v6
import { useNavigate } from "react-router-dom";

function App() {
  const navigate = useNavigate();

  return (
    <>
      <button onClick={() => navigate(-2)}>
        Go 2 pages back
      </button>
      <button onClick={() => navigate(-1)}>
      	Go back
      </button>
      <button onClick={() => navigate(1)}>
        Go forward
      </button>
      <button onClick={() => navigate(2)}>
        Go 2 pages forward
      </button>
    </>
  );
}
이러한 변화의 가장 주된 이유는 React suspense와의 호환성을 더 높이기 위함입니다. 
아직 이전의 클릭이 로딩 중인 상태에서 다른 라우트로의 링크를 클릭한 경우와 같이 
pending이 충돌되는 경우에 더 부드러운 경험(smoother experience)를 제공할 수 있습니다. 
navigate API는 이전의 pending 작업을 알아차리고 해당 내용을 history stack에 PUSH하는 것이 
아니라 REPLACE함으로써 로드되지 않은 기록으로 끝나지 않도록 합니다.

#참고

https://velog.io/@soryeongk/ReactRouterDomV6