Error: [Elementos] no es un componente
<Route>
. Todos los componentes secundarios de<Routes>
deben ser<Route>
o<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>
Envolví todo en una ruta así <Route path="/process/payment" element={<ProtectedR ><Elements stripe={loadStripe(stripApikey)}><Payments /></Elements></ProtectedR>} />
pero después de que da un error en mi archivo de pago × Error: Could not find Elements context; You need to wrap the part of your app
El error es bastante claro: dentro de un <Router>
, todos los hijos directos deben ser rutas.
Mueva el <Elements>
dentro de element={...}
.
<Route path="/process/payment" element={ <ProtectedR> <Elements stripe={loadStripe(stripApikey)}> <Payments /> </Elements> </ProtectedR> } />
Enrutador React, versión 6
Dado que [Elements] no es un componente <Route>
, no se puede incluir dentro <Route>
. Eso significa que los elementos deben colocarse fuera <Route>
.
Todos los elementos secundarios de <Routes>
deben ser <Route>
o
<React.Fragment>
. Por lo tanto, si hay un componente <Route>
, debe envolverse alrededor de <Routes>
.
Las declaraciones anteriores dan como resultado la siguiente sintaxis (en su caso, hay una ruta protegida):
<Elements stripe={loadStripe(stripeApiKey)}> <Routes> <Route exact path="/process/payment" element={<ProtectedRoute />}> <Route exact path="/process/payment" element={<Payments />} /> </Route> </Routes> </Elements>