useContext 给我的 React router dom 带来了问题

Question

所以我有这个应用程序文件用于反应，

  const [cart, setCart] = useState([

  ])
  return (
    <Router>
      <Routes>
      <Route  element={<Layout />}>
        <cartContext.Provider value={{ cart, setCart }}>{/* you wrap provider around the components that you want to have access to the state  */}
      
        <Route path="/" index element={<Home/>} />


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

        <Route path="Signup" element={<Signup />} />
        <Route path="Login" element={<Login />} />
        <Route path="Cart"  element={<Cart />} />

        <Route path="Cart/shipping-buynow" element={<ShippingAddToCart />} />
        <Route path="/help" element={<Help />} />
        <Route path="/Modal" element={<Modal />} />
        <Route path="/Add" element={<Add />} />


        {/* <Route path="/create" element={<CreateMeet/>} /> */}
        {/* <Route path="/Register" element={<Register />} /> */}
        </cartContext.Provider>
      </Route>
      </Routes>
    </Router>
  )
}

但由于某种原因，我实现的 useContext 给了我一个错误

错误：[未定义]不是组件。的所有子组件必须是 a 或

Answer 1

由于 Routes 标记，它会给您一个错误。在 react-router-dom 的 version 6 中，您不能在 中放置除 route 之外的任何内容... 标签。

因此，请像下面这样使用 useContext ：

<Router>
   <cartContext.Provider value={{ cart, setCart }}>
      <Routes>
        <Route ...>
      </Routes>
   </cartContext.Provider>
</Router>

它应该可以解决您的问题。