未捕获的错误：[ItemListContainer] 不是<Route>零件。 的所有子组件<Routes>必须是<Route>或者<React.Fragment>

Question

我正在用 React 编程，事实是我第一次用 React 编程。 在App.js中我定义了路由，我使用react-router-dom库，但是我得到标题的错误，代码如下，我做错了什么，你能给我解释一下，因为我带来了所有组件。

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;

谢谢

Answer 1

ItemListContainer 在 Cart 路由之后导致问题，因为在 Routes 中您只能定义路由

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;

Answer 2

您将 ItemListContainer/> 作为 Routes> 中的子项。 要么删除这个组件，把它移到路由之外，要么在里面创建一个新路由。

<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>

Answer 3

我认为您的错误消息中的答案是：

您需要从 <Routes> ... </Routes> 容器中删除 < ItemListContainer /> 并将其移动到另一个地方。 例如：

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>
  );
}