未捕获的错误：[Elements] 不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>答案

【问题标题】：Uncaught Error: [Elements] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>未捕获的错误：[Elements] 不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>
【发布时间】：2022-07-16 00:39:08
【问题描述】：

我试图集成 strip API 密钥，但我无法在新的 react-router-dom 版本中提出解决方案

这是完整的错误

组件出现上述错误：

at Routes (http://localhost:3000/static/js/bundle.js:81119:5)
at Router (http://localhost:3000/static/js/bundle.js:81052:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:79861:5)
at App (http://localhost:3000/main.79cc3231add2da1b35a8.hot-update.js:89:63)
at Provider (http://localhost:3000/static/js/bundle.js:74963:5)

考虑在树中添加错误边界以自定义错误处理行为。请访问https://reactjs.org/link/error-boundaries 了解有关错误边界的更多信息。

这是我的受 Appjs 保护的路由代码：

import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";

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

useEffect(() => {
 const stripePromise= loadStripe(stripeApiKey);
}, [stripeApiKey]);



<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 />} />
      {stripeApiKey && (
        <Elements stripe={stripePromise}>
          <Route path="/order/payment" element={<Payment />} />
        </Elements>
      )}
</Route>

我的受保护路线代码

const ProtectedRoute = () => {
const { loading, isAuthenticated, user } = useSelector((state) => state.user);
const location = useLocation();

if (isAuthenticated == false) {
return <Navigate to="/account" state={{ from: location }} />;
}
return <Outlet />;
};

export default ProtectedRoute;

【问题讨论】：

标签： javascript reactjs react-router stripe-payments react-router-dom

【解决方案1】：

由于这行代码，您会收到该错误

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

【讨论】：