我是新手，我不确定如何在我的 app.js 中实现条纹元素

Question

我的 App.js 看起来像这样

 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> }

浏览器返回一个错误，指出元素不是路由组件，但我不知道如何呈现它。 我阅读了 stripe/react 文档示例，但我仍然无法让它工作。

我的控制台中不断出现此错误

“index.tsx:19 Uncaught (in promise) Error: [Elements] 不是组件。<Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>”

Answer 1

错误很明显：在 a 中，所有直接子级必须是路由。

将换行移到 element={...} 内。

试试这个代码它应该工作。

快乐编码！

        <Route path = "/payment" element={ stripeApiKey && 
          <Elements stripe={loadStripe(stripeApiKey)}> <Payment/> </Elements>} exact/>