ReactJs Solved— Matched leaf route at location “/” does not have an element

Rails apiモードとReactでcreateページを作成する際にこのようなエラーが表示されたので、解決策を記述しておきます。

Matched leaf route at location "/" does not have an element or Component.
This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.

結論として、Routeの記述の仕方が間違っているということです。v6ではcomponentという記述は使えなくなっているようです。そのため、componentの部分をelementに修正してあげるとエラーが解決します。

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
// import ReactDOM from "react-dom";
const App = () => {
  return (
    <Router >
      <Routes>
        <Route path="/" component={ Home }></Route>
      </Routes>
    </Router>
  )
}
export default App;

解決策

<Route path="/" element={<Home />}></Route>