Error: [Elements] is not a
<Route>component. All component children of<Routes>must be a<Route>or<React.Fragment>
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
<Elements stripe={loadStripe(stripApikey)}>
<Route
path="/process/payment"
element={
<ProtectedR>
<Payments />
</ProtectedR>
}
/>
</Elements>
I wrapped all in route like that <Route path="/process/payment" element={<ProtectedR ><Elements stripe={loadStripe(stripApikey)}><Payments /></Elements></ProtectedR>} /> but after its gives error in my payment file × Error: Could not find Elements context; You need to wrap the part of your app
The error is quite clear: within a <Router>, all direct children must be routes.
Move the <Elements> wrap inside element={...}.
<Route
path="/process/payment"
element={
<ProtectedR>
<Elements stripe={loadStripe(stripApikey)}>
<Payments />
</Elements>
</ProtectedR>
}
/>
React Router, version 6
Since [Elements] is not a <Route> component, it cannot be wrapped
inside <Route>. That means Elements should be placed outside <Route>.
All component children of <Routes> must be a <Route> or
<React.Fragment>. Therefore, if there is a <Route> component, it
must be wrapped around <Routes>.
The above statements result to the following syntax (in your case, there is a Protected Route):
<Elements stripe={loadStripe(stripeApiKey)}>
<Routes>
<Route exact path="/process/payment" element={<ProtectedRoute />}>
<Route exact path="/process/payment" element={<Payments />} />
</Route>
</Routes>
</Elements>