Question

0

97

Views

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

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

7 months ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T15:58:00.757Z

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

Answer 2 · 2022-07-03T15:58:00.765Z

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>