react-router-dom 버전 이슈

[yjm6560]

책에서는 아마 react-router-dom v5 를 사용하는 것 같다. 하지만 react-router-dom v6 부터는 좀 달라졌다(현재 내가 설치한 버전은 v8).

그래서 react-router-dom v5 를 깔려다가 그냥 최신 거 쓰는 게 더 마음에 들어서 책 내용과 조금 다르게 진행하기로 했다. react-router-dom 버전 때문에 달라지는 내용들은 코멘트에 하나씩 남기면서 진행할 예정

[yjm6560]

Chapter 3

Switch 사용 불가

v6 부터는 Switch 사용이 불가능하고 대신 Routes 를 사용한다. 참고 : https://miracleground.tistory.com/entry/Error-Switch-is-not-exported-from-react-router-dom-%ED%95%B4%EA%B2%B0

Routes 내에 component 사용 불가

component 대신 element 를 사용해야 한다. 그러므로

<Routes>
    <Route exact path="/">
        <Home />
    </Route>
</Routes>

이 아닌

<Routes>
    <Route path="/" element={ <Home /> } />
</Routes>

으로 사용해야 한다. 또 exact 도 더이상 사용하지 않음. 참고 : https://velog.io/@nemo/react-error-routes

[yjm6560]

Chapter 4

4.6.4 Redirect 사용 불가

Redirect 대신 Navigate 를 사용해야 한다.

import { Redirect } from "react-router-dom";
<Redirect from="*" to="/" /> // 안 됨

->

import { Navigate } from "react-router-dom";
<Route path="*" element={<Navigate replace from="*" to="/" />} />

[yjm6560]

Chapter 4

4.6.5 useHistory 사용 불가

useHistory 대신 useNavigate 를 사용해야 한다.

// react v6 에서 안 되는 코드
import { useHistory } from "react-router-dom";
const history = useHistory();
history.push("/");

->

import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
navigate("/");