Uncaught Error: [Routes] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>エラー解決法

Uncaught Error: [Routes] is not a component. All component children of must be a Route or React.Fragmentエラー解決法

エラーが発生する原因になっているコード

App.jsx

<Routes>
      <Route path="/" element={<Home />} />
      <Routes path="/page1">
        <Route index={true} element={<Page1 />} />
            <Route path="detailA" element={<Page1DetailA />} />
            <Route path="detailB" element={<Page1DetailB />} />
        </Routes>
      <Route path="/page2" element={<Page2 />} />
    </Routes>

エラー原因

• Routesの中にRoutesを入れていて、入れ子状態になっている為。
  ⇒Routesの中でRoutesを入れ子にして使うことはできない

解決法

Routesは全体で1つにして入れ子にしたいところはRouteで囲う

修正したコード

App.jsx

<Routes>
      <Route path="/" element={<Home />} />
      <Route path="/page1">
        <Route index={true} element={<Page1 />} />
            <Route path="detailA" element={<Page1DetailA />} />
            <Route path="detailB" element={<Page1DetailB />} />
        </Route>
      <Route path="/page2" element={<Page2 />} />
    </Routes>