Issue

在react-router-dom@6中，Route组件只能由Routes组件呈现，或者在嵌套路由的情况下，由另一个Route组件呈现.Elements组件不是这两个组件，因此它不能由Route或Routes组件直接呈现.看起来Elements是某种条纹的"上下文提供者".

Solution

这里的解决方案是直接用Elements组件包装Payment，或者在呈现Outlet的布局路由中呈现它，以便嵌套的路由将其element内容呈现到其中.

包装器示例

如果只需要包装单个已布线的组件，则使用包装组件非常有用.

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

布局示例

如果需要缠绕多条路由，则布局路由非常有用.

import { Outlet } from 'react-router-dom';

const ElementsLayout = ({ stripe }) => (
  <Elements stripe={stripe}>
    <Outlet />
  </Elements>
);

export default ElementsLayout;

...

import ElementsLayout from '../path/to/ElementsLayout';

const App = () => {
  ...

  const [stripeApiKey, setStripeApiKey] = useState();

  ...

  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <Routes>
          <Route path="/about" element={<About />} />
          <Route element={<ProtectedRoute />}>
            <Route path="/account" element={<Profile />} />
            {stripeApiKey && (
              <Route
                element={<ElementsLayout stripe={loadStripe(stripeApiKey)} />}
              >
                <Route path="/process/payment" element={<Payment />} />
              </Route>
            )}
          </Route>
          <Route path="/password/forgot" element={<ForgotPassword />} />
          <Route
            path="/password/reset/:token"
            element={<ResetPassword />}
          />
          <Route path="/cart" element={<Cart />} />
        </Routes>
        <Footer />
      </BrowserRouter>
    </div>
  );
};