i use element insted of route becouse i use stripe for online payment

Question

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

Answer 1

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>
  }
/>