Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

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

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>
  }
/>
7 months ago · Juan Pablo Isaza Report

0

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>
7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs