反应路由器/我想去一个新页面而不是在母组件下添加组件

Question

当我点击订购按钮时，我想转到一个新页面，而不是停留在购买表单组件并在其下方添加 orderComplited 组件

BuyForm.js

App.js

orderCompleted

Answer 1

问题是您将 OrderCompleted 路由渲染为嵌套路由，其中 Outlet 由 BuyForm 路由渲染。

<Route path="order" element={<BuyForm />}>
  <Route path="orderCompleted" element={<OrderCompleted />} />
</Route>

BuyForm组件是布局组件。这意味着 BuyForm 组件保留在呈现的屏幕上，同时子路径也被匹配和呈现。

要解决这个问题，您应该稍微重构一下代码。将 BuyForm 组件移动到它自己的路由中，当布局 Route 组件路径匹配时，该路由将被指定为要匹配和渲染的索引路由。从 BuyForm, one will be rendered by default now by the wrapping Route. Now both the BuyFormandOrderCompletedroutes will be rendered into theOutlet, one at-a-time, when their path 的匹配项中删除 Outlet。

<Route path="order">
  <Route index element={<BuyForm />} />
  <Route path="orderCompleted" element={<OrderCompleted />} />
</Route>

反应路由器/我想去一个新页面而不是在母组件下添加组件

react router / i wanna go to a new page instead of adding the component under the mother component

reactjs

react-router

react-router-dom