Error: [App] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

5일전부터 React-router-dom이 v6.0.2로 업데이트 됨에 따라 <Switch> 문법을 사용할 수 없게 되고 제목처럼 에러가 발생하게 된다.

당황하지말고, <Switch>를 <Routes>로 변경하자. 우리가 알던 스위치는 죽었다!!
바꾸고 나서 또 Routes의 자손들은 모두 Route컴포넌트로 이루어져 있어야 한다 라고 하는데 이는 아래 예제 코드를 통해 쉽게 이해하면 된다.

업데이트 전 코드

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path='/'>
          <Main/>
        </Route>
        <Route path='/blind'>
          <Blind/>
        </Route>
        <Route path='/clanranking'>
          <ClanRanking/>
        </Route>
        <Route path='/testcodeshare'>
          <TestCodeShare/>
        </Route>  
      </Switch>
    </BrowserRouter>
  )
}

업데이트 후 코드

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Main/>}/>
        <Route path='/blind' element={<Blind/>}/> 
        <Route path='/clanranking' element={<ClanRanking/>}/>
        <Route path='/testcodeshare' element={<TestCodeShare/>}/>
      </Routes>
    </BrowserRouter>
  )
}

코드를 통해 이해하니까 조금 더 쉽지 않나요?? 안되는 부분 있으시면 댓글 남겨주세요! 같이 고민해봐요~

이 오류가 나신분들은 useHistory오류도 나실텐데요
6.0.0 이후로 useHistory가 useNavigate로 변경되었습니다

변경전

import { useHistory } from "react-router-dom";

const history = useHistory();

변경후

import { useNavigate } from "react-router-dom";

const history = useNavigate();

잘 써오던거 계속 바꾸고그래..ㅠㅠ