My App.js looks like this
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>
}The browser returns an error saying that the elements is not a route component but I don't know how else to render it. I read the stripe/react documentation sample but i still cant get it to work.
I keep getting this error in my console
"index.tsx:19 Uncaught (in promise) Error: [Elements] is not a component. All component children of < Routes > must be a < Route > or <React.Fragment>"
The error is quite clear: within a , all direct children must be routes.
Move the wrap inside element={...}.
try this code it should work.
happy coding !
<Route path = "/payment" element={ stripeApiKey &&
<Elements stripe={loadStripe(stripeApiKey)}> <Payment/> </Elements>} exact/>