Uncaught Error: [Elements] is not a
<Route>
component. All component children 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>
);
};
最佳答案
问题
在react-router-dom@6
中,Route
组件只能由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>
);
};
关于reactjs - 我在使用 Elements of stripe 时遇到了 React router v6 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73673586/