리액트 에러 모음

업데이트 히스토리

• yyyy.mm.dd - 업데이트 내용

📒 Router 관련 에러

📌 "react-router-dom" 6버전부터

1. "Switch"가 삭제되고 "Routes"가 생겼다.
2. "useHistory"가 삭제되고 "useNavigate"가 생겼다.

📌 1-1

export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'

• <Switch />에서 <Routes /> 사용

📌 1-2

... is not a component. All component children of must be a or <React.Fragment>

• Route안에 component 대신 element 사용
• Routes 자식은 Route만 사용(Routes안에 Route만 사용)

✏️ 1. Error 예시 및 변경

5.x버전 까지

<Switch>
  <Route path="/">
    <DayList />
  </Route>
  <Route path="/day">
     <Day />
   </Route>
</Switch>

6.x버전 부터

<Routes>
  <Route path="/" element={<Day />} />
  <Route path="/day" element={<DayList />} />
</Routes>

📌 2-1

export 'useHistory' (imported as 'useHistory') was not found in 'react-router' (possible exports: AbortedDeferredError, Await, ...)

• useHistory 대신 useNavigate 사용

✏️ 2. Error 예시 및 변경

5.x 버전 까지

import { useHisotry } from "react-router";
  
const history = useHistory();
  
history.push(`/home`);

6.x부터

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

navigate(`/home`);

참고

• 코딩앙마 유투브(React JS #15 POST(생성), useHistory() - 초보자를 위한 리액트 강좌 중)