useContext 给我的反应路由器带来了问题 dom

Question

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


  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 给我一个错误

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

Answer 1

它给你一个 error 因为 Routes tag。在 react-router-dom 的 version 6 中，您不能在 <Routes>...</Routes> 标签内放置 route 以外的任何内容。

所以使用 useContext 如下：

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

应该可以解决您的问题。

useContext 给我的反应路由器带来了问题 dom

useContext is giving me problems with my react router dom

state

state-management

reactjs

react-hooks

use-context