React项目集成Stripe Elements时出现[Elements]非路由组件的报错问题咨询

这个错误的核心原因很明确：React Router的<Routes>组件只允许<Route>或<React.Fragment>作为直接子元素，你现在把<Elements>直接放在了<Routes>下面，路由系统无法识别这个非路由组件，所以抛出了报错。

下面是两种可行的修复方案，你可以根据自己的需求选择：

方案一：在单个路由的Element中包裹Elements #

如果只有/payment这一个路由需要Stripe功能，最直接的方式是把<Elements>作为该路由element属性的一部分，而不是作为<Routes>的子元素：

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { Elements } from '@stripe/react-stripe-js'
import { loadStripe } from '@stripe/stripe-js'
import { useState, useEffect } from 'react' // 别忘了导入useState和useEffect！
import axios from 'axios'
import Payment from './Payment' // 确保你的Payment组件路径正确

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>
        <Route 
          path="/payment" 
          element={
            // 先判断api key是否加载完成，再渲染Elements和Payment
            stripeApiKey ? (
              <Elements stripe={loadStripe(stripeApiKey)}>
                <Payment />
              </Elements>
            ) : (
              <div>加载支付组件中...</div>
            )
          } 
          exact
        />
        {/* 其他路由可以继续在这里添加 */}
      </Routes>
    </BrowserRouter>
  )
}

方案二：用Elements包裹整个路由系统（多路由需要Stripe时） #

如果你的应用中有多个路由都需要使用Stripe Elements，你可以把整个<Routes>包裹在<Elements>里面，但要确保在api key加载完成后再渲染：

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { Elements } from '@stripe/react-stripe-js'
import { loadStripe } from '@stripe/stripe-js'
import { useState, useEffect } from 'react'
import axios from 'axios'
import Payment from './Payment'

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();
  }, [])
  
  // 未获取到api key时显示加载状态
  if (!stripeApiKey) {
    return <div>加载支付配置中...</div>
  }
  
  return (
    <BrowserRouter>
      <Elements stripe={loadStripe(stripeApiKey)}>
        <Routes>
          <Route path="/payment" element={<Payment/>} exact/>
          {/* 其他需要Stripe的路由 */}
        </Routes>
      </Elements>
    </BrowserRouter>
  )
}

额外注意事项 #

• 别忘了在组件顶部导入useState和useEffect，你的原代码里漏掉了这部分！
• 确保loadStripe只在stripeApiKey存在时调用，避免传入空值导致的潜在错误
• 在Payment组件中，要正确使用Stripe提供的hooks（比如useStripe()、useElements()）来访问Stripe实例

内容的提问来源于stack exchange，提问作者Joey Smith