reactjs - 我在使用 Elements of stripe 时遇到 React router v6 问题

Question

Uncaught Error: [Elements] is not a <Route> component. All componentchildren of <Routes> must be a <Route> or <React.Fragment>

我什至尝试使用 Fragment

我也在使用 protected 路由。

    const App = () => {
  const { isAuthenticated, user } = useSelector((state) => state.user);

  const [stripeApiKey, setStripeApiKey] = useState();

  async function getStripeApiKey() {
    const { data } = await axios.get("/api/v1/stripeapikey");
    setStripeApiKey(data.stripeApiKey);
  }

  useEffect(() => {
    WebFont.load({
      google: {
        families: ["Roboto", "Droid Sans", "Chilanka"],
      },
    });
    store.dispatch(loadUser());
    getStripeApiKey();
  }, []);

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

        <Footer />
      </BrowserRouter>
    </div>
  );
};

Answer 1

问题

在react-router-dom@6中，Route组件只能被Routes组件渲染，或者在嵌套的情况下routes，另一个 Route 组件。 Elements 组件不是这两者，因此它不能直接由 Route 或 Routes 组件呈现。 Elements 似乎是某种 Stripe“上下文提供者”。

解决方案

这里的解决方案是直接用 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>
  );
};