Mi App.js se ve así
import { BrowserRouter, Routes, Route } from 'react-router-dom' import { Elements } from '@stripe/react-stripe-js' import { loadStripe } from '@stripe/stripe-js' function App() { const [stripeApiKey, setStripeApiKey] = useState(''); useEffect(() => { store.dispatch(loadUser()) async function getStripApiKey() { const { data } = await axios.get('/api/v1/stripeapi'); setStripeApiKey(data.stripeApiKey) } getStripApiKey(); }, []) return ( <BrowserRouter> <Routes> {stripeApiKey && <Elements stripe={loadStripe(stripeApiKey)}> <Route path = "/payment" element={<Payment/>} exact/> </Elements> </Routes> }El navegador devuelve un error que dice que los elementos no son un componente de ruta, pero no sé cómo representarlo. Leí la muestra de documentación de stripe/react pero todavía no puedo hacer que funcione.
Sigo recibiendo este error en mi consola.
"index.tsx:19 Error no detectado (en promesa): [Elements] no es un componente. Todos los elementos secundarios de < Routes > deben ser < Route > o <React.Fragment>"
El error es bastante claro: dentro de un , todos los hijos directos deben ser rutas.
Mueva la envoltura dentro de element={...}.
prueba este código, debería funcionar.
¡feliz codificación!
<Route path = "/payment" element={ stripeApiKey && <Elements stripe={loadStripe(stripeApiKey)}> <Payment/> </Elements>} exact/>