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>