[Error] Matched leaf route at location "" does not have an element or Component.

• 에러 내용
  

• 에러 코드

import { Route, Routes } from 'react-router-dom';
import Menu from './components/Menu';
import RedPage from './pages/RedPage';
import BluePage from './pages/BluePage';

function App() {
  return (
    <div>
      <Menu />
      <hr />
      <Routes>
        <Route path="/red" component={RedPage} />
        <Route path="/blue" component={BluePage} />
      </Routes>
    </div>
  );
}

export default App;

• 에러 원인
  React Router v6가 정식 릴리즈 되면서 Route에 childeren 이나 component가 사라졌고 대신 element를 사용해야함

import { Route, Routes } from 'react-router-dom';
import Menu from './components/Menu';
import RedPage from './pages/RedPage';
import BluePage from './pages/BluePage';

function App() {
  return (
    <div>
      <Menu />
      <hr />
      <Routes>
        <Route path="/blue" element={<BluePage />} />
        <Route path="/red" element={<RedPage />} />
      </Routes>
    </div>
  );
}

export default App;