Uncaught Error: [ItemListContainer] is not a <Route> component. All component children of <-CodePudding

I'm programming in react, the truth is the first time that I program it in React. in App.js I define the routes, I use the react-router-dom library, but I get the error of the title, the code is the following, what am I doing wrong, can you explain it to me, because I bring all the components.

import React from 'react';
import './App.css';
import 'materialize-css/dist/css/materialize.css';
import NavBar from './components/NavBar';
import ItemListContainer from './components/ItemListContainer';
import MoreSell from './components/ItemListMoreSell';
import ItemDetailContainer from './components/ItemDetailContainer';
import Cart from './components/Cart';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <NavBar />
        <MoreSell/>
        <Routes>
          <Route path="/" element={<ItemListContainer/>} />
          <Route path="/category/:categoryID" element={<ItemListContainer/>} />  
          <Route path="/detail/:productID" element={<ItemDetailContainer/>} /> 
          <Route path="/cart" element={<Cart/>} />
        <ItemListContainer/>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

Thank you

CodePudding user response：

ItemListContainer is causing the problem after the Cart route, since inside Routes you can only define route

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <NavBar />
        <MoreSell/>
        <Routes>
          <Route path="/" element={<ItemListContainer/>} />
          <Route path="/category/:categoryID" element={<ItemListContainer/>} />  
          <Route path="/detail/:productID" element={<ItemDetailContainer/>} /> 
          <Route path="/cart" element={<Cart/>} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

CodePudding user response：

You have ItemListContainer/> as a child inside Routes>. Either delete this component, move it outside of Routes, or create a new route with it inside.

<Routes>
          <Route path="/" element={<ItemListContainer/>} />
          <Route path="/category/:categoryID" element={<ItemListContainer/>} />  
          <Route path="/detail/:productID" element={<ItemDetailContainer/>} /> 
          <Route path="/cart" element={<Cart/>} />
          <ItemListContainer/> //<-------------------------This is the error
</Routes>

CodePudding user response：

I think the answer in your error message:

you need to remove < ItemListContainer /> from < Routes > ... </ Routes > container and move it to another place. For example:

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <NavBar />
        <MoreSell/>
        <Routes>
          <Route path="/" element={<ItemListContainer/>} />
          <Route path="/category/:categoryID" element={<ItemListContainer/>} />  
          <Route path="/detail/:productID" element={<ItemDetailContainer/>} /> 
          <Route path="/cart" element={<Cart/>} />
        </Routes>
        <ItemListContainer/>
      </BrowserRouter>
    </div>
  );
}