useContext is giving me problems with my react router dom

Question

so I have this app file for 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>
  )
}

but for some reason the useContext that I implemented is giving me an error

Error: [undefined] is not a component. All component children of must be a or <React.Fragment>

Hard to know exactly the issue here as you haven't shared the code for the context and how it is set up but usually the component name should just be cartContextProvider not cartContext.Provider. It only appears as cartContext.Provider when you set it up but you render it as cartContextProvider — Vuk, Mar 10 '22 at 05:48

score 3 · Accepted Answer · answered Mar 10 '22 at 06:05

It is giving you an error because of the Routes tag. In version 6 of react-router-dom you can't put anything except route inside your <Routes>...</Routes> tag.

So use useContext like below:

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

It should solve your problem.

useContext is giving me problems with my react router dom

1 Answers1