[React 오류] A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

react-router-dom 버전이 5->6으로 업데이트되었다고 한다.

내가 공부하고 있는 버전은 5라서 계속 오류가 떴나보다ㅠ

 

※ 참고 사이트

https://stackoverflow.com/questions/69832748/error-a-route-is-only-ever-to-be-used-as-the-child-of-routes-element

Error: A <Route> is only ever to be used as the child of <Routes> element

---

★ 결론

• Route구성 요소를 Routes로 래핑
• component를 element로 바꾼다
• JSX 문법 사용

 

이전버전

import {BrowserRouter as Router, Route} from "react-router-dom";
...
function App(){
  return(
    <ThemeProvider theme={theme}>
        <GlobalStyle/>
        <Router>
          <Route path="/quiz" component={Quiz}/>
        </Router>
    </ThemeProvider>
  );
}
...

 

업데이트 버전

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
...
const App = () => {
    return (
        <ThemeProvider theme={theme}>
            <GlobalStyle />
            <Router>
                <Routes>
                  <Route path="/quiz" element={<Quiz/>} />
                </Routes>
            </Router>
        </ThemeProvider>
    );
};
...