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

[Reason]

 

React 에서 Router를 사용할 때는 Routes 안에 Route 요소가 들어가야 하고 Route에는 element 속성을 통해 컴포넌트를 넣거나 해주어야 하는데 그렇지 않았다.

1차적으로 Routes 요소 자체를 빼먹어서 발생되었다가 Route 내에 element 속성을 넣지않고 바로 <컴포넌트 명/> 이런식으로 컴포넌트를 넣어버려서 발생된 에러였다.

 

 

[Solution]

해결 전

function App() {
  return (
    <div>
      <BrowserRouter>
        <Routes >
          <Route path='/'>
          	<MainPage />
          </Route>
          <Route path="/list01">
          	<App_2 />
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

 

해결 후

function App() {
  return (
    <div>
      <BrowserRouter>
        <Routes >
          <Route path='/' element={<MainPage />} />
          <Route path="/list01" element={<App_2/>} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

이런식으로 Route 요소 안에 element 속성을 사용하여 컴포넌트를 넣어주어 해결하면 된다.