React Router Dom新版本整合Stripe API时路由报错求助

错误原因 #

在react-router-dom v6+版本中，<Routes>（或嵌套的<Route>）的直接子组件只能是<Route>或<React.Fragment>，你代码中把<Elements>直接作为嵌套<Route>的子元素，违反了路由组件的结构规则，因此触发报错。

解决方案 #

1. 修复stripePromise的作用域问题 #

你当前在useEffect里定义的stripePromise是局部变量，外部无法访问，需要用useState存储它：

import { useState, useEffect } from 'react';
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";

// 新增state保存stripePromise
const [stripePromise, setStripePromise] = useState(null);

useEffect(() => {
  store.dispatch(loadUser());
  getStripeApiKey();
}, []);

useEffect(() => {
  if (stripeApiKey) {
    setStripePromise(loadStripe(stripeApiKey));
  }
}, [stripeApiKey]);

2. 调整路由结构，将Elements移到Route的element属性中 #

不能把<Route>嵌套在<Elements>里，而是要将<Elements>作为Payment组件的父容器，通过Route的element属性传递：

<Route element={<ProtectedRoute />}>
  <Route path="/account" element={<Profile />} />
  <Route path="/me/update" element={<ProfileEdit />} />
  <Route path="/password/update" element={<UpdatePassword />} />
  <Route path="/login/shipping" element={<Shipping />} />
  <Route path="/order/confirm" element={<ConfirmOrder />} />
  {/* 修改路由结构：把Elements+Payment作为element的值 */}
  <Route 
    path="/order/payment" 
    element={
      stripeApiKey && stripePromise ? (
        <Elements stripe={stripePromise}>
          <Payment />
        </Elements>
      ) : (
        <div>加载支付组件中...</div>
      )
    } 
  />
</Route>

逻辑说明 #

react-router-dom v6要求所有渲染的组件必须通过<Route>的element属性指定，嵌套路由的子节点只能是其他<Route>。现在的写法将<Elements>和<Payment>组合后作为路由的element值，既满足了Stripe的组件包裹要求，也符合路由的结构规则。同时增加了加载状态判断，避免在Stripe密钥或实例未初始化完成时渲染Payment组件。

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