Open yjm6560 opened 1 year ago
v6 부터는 Switch 사용이 불가능하고 대신 Routes 를 사용한다. 참고 : https://miracleground.tistory.com/entry/Error-Switch-is-not-exported-from-react-router-dom-%ED%95%B4%EA%B2%B0
component 대신 element 를 사용해야 한다. 그러므로
<Routes>
<Route exact path="/">
<Home />
</Route>
</Routes>
이 아닌
<Routes>
<Route path="/" element={ <Home /> } />
</Routes>
으로 사용해야 한다.
또 exact
도 더이상 사용하지 않음.
참고 : https://velog.io/@nemo/react-error-routes
Redirect
대신 Navigate
를 사용해야 한다.
import { Redirect } from "react-router-dom";
<Redirect from="*" to="/" /> // 안 됨
->
import { Navigate } from "react-router-dom";
<Route path="*" element={<Navigate replace from="*" to="/" />} />
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("/");
책에서는 아마 react-router-dom v5 를 사용하는 것 같다. 하지만 react-router-dom v6 부터는 좀 달라졌다(현재 내가 설치한 버전은 v8).
그래서 react-router-dom v5 를 깔려다가 그냥 최신 거 쓰는 게 더 마음에 들어서 책 내용과 조금 다르게 진행하기로 했다. react-router-dom 버전 때문에 달라지는 내용들은 코멘트에 하나씩 남기면서 진행할 예정