React Router v6

 

react-router-dom은 v6으로 업그레이드

 

React Router v6는 2021년 11월 2일에 공식적으로 출시되었다.

React Hooks와 더 나은 통합을 제공하며, 번들 크기가 줄어드는 등의 장점이 있다.

npm install react-router-dom@latest // v6.2.2
npm install --save-dev @types/react-router-dom // 타입 정의 패키지

 

 

• useNavigate() 훅을 도입해 useHistory()를 대체했다.
  • useHistory가 navigation과 통합되어 사라졌다.
• 하지만 useNavigate를 사용하여 동일한 기능을 수행 할 수 있다.
• API가 간소화되었다.
• <Switch>가 <Routes>로 대체되었다.
• 또한 exact 속성이 삭제되어 경로 매칭이 더 간단해졌다.

 

 

history=> navigate로 변경

// 이전 방식
const history = useHistory();
history.push("/login"); 부분을 아래와 같이 변경하면 됨니다.

// 변경 코드
const navigate = useNavigate();
navigate('/login', { replace: true });

• replace 옵션은 현재 주소의 가장 하위주소의 주소로 교체하겠다는 의미
• 예를 들어 현재 주소가 localhost:3000/create-account 라고 가정했을 때
• navigate('/login'); 사용시 이동되는 주소는 localhost:3000/create-account/login이고
• navigate('/login', { replace: true }); 사용 시 이동되는 주소는 localhost:3000/login이다.

 

 

const navigate = useNavigate();

navigate("/login");

navigate("/login",{ state : { email, password } } ); // state 사용시

• 계정 생성 후, 생성한 이메일과 비밀번호를 state에 담아서 Login페이지로 보낼 수 있다.
• 보낸 이메일과 비밀번호는 useLocation을 통해 가져와서 바로 form 창에 넣어줄 수 있다.

 

 

interface LocationState{

email: string;

password: string;

}

const location: Location = useLocation();

const state=location.state as LocationState

 

 

<Switch>가 <Routes>로 대체

// React Router v5

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { CreateAccount } from "../pages/create-account";
import { Login } from "../pages/login";

export const LoggedOutRouter = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Login />
        </Route>
        <Route path="/create-account">
          <CreateAccount />
        </Route>
      </Switch>
    </Router>
  );
};

 

 

// React Router v6

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { CreateAccount } from "../pages/create-account";
import { Login } from "../pages/login";

export const LoggedOutRouter = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/create-account" element={<CreateAccount />} />
      </Routes>
    </Router>
  );
};

React Router v6에서는 <Switch> 대신 <Routes>를 사용하고, Route 컴포넌트에서 component나 render 대신 element 속성에 JSX 요소를 전달한다.

이 코드는 v6 방식으로 Routes를 사용하고 element 속성을 통해 컴포넌트를 렌더링 한다.