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>