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

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

 

업데이트 전 코드

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path='/'>
          <Home/>
        </Route>
        <Route path='/list'>
          <List />
        </Route>
        <Route path='/view'>
          <Vie />
        </Route>
      </Switch>
    </Router>
  )
}

 

 

업데이트 후 코드

const App = () => {
  return (
    <Router>
      <Routes>
        <Route exact path='/' element={<Home />}/>
        <Route path='/list' element={<List />}/> 
        <Route path='/view' element={<View />}/>
      </Routes>
    </Router>
  )
}

 

 

useHistory 또한 오류가 나는데 useNavigate로 변경해서 사용하면 된다~

 

업데이트 전 코드

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

const history = useHistory();

 

업데이트 후 코드

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

const history = useNavigate();