CODEWITHSUNDEEP
reactjsreact-hooksstatestate-managementuse-context
evan_tech1234
evan_tech1234

Reputation: 123

useContext is giving me problems with my react router dom

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>

Upvotes: 2

Views: 2411

Answers (1)

Dharmik Patel
Dharmik Patel

Reputation: 1201

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.

Upvotes: 3

Related Questions