React Router v6带参数跳转异常问题求助（v6.3.0）

问题场景 #

操作流程：

1. 从参与者列表页跳转至参与者详情页
2. 从参与者详情页跳转至发票编辑页

出现两个异常：

• 参与者详情页未出现在浏览器历史记录中
• 发票编辑页表单提交后，调用navigate尝试返回详情页，实际跳转到了参与者列表页

跳转代码 #

从列表页到详情页：

<Link to=('participant/xxx-guid') replace={true}>Detail</Link>

从详情页到发票编辑页：

<Link to=('./participant/xxx-guid/yyy-guid/edit-invoice') replace={true}>Detail</Link>

表单提交后的跳转代码：

navigate(`/participant/xxx-guid`, {replace:true});

路由配置 #

参与者路由

const ParticipantRoutes = () => (
  <ErrorBoundaryRoutes>
    <Route index element={<Participant />} />
    <Route path="new" element={<ParticipantUpdate />} />
    <Route path=":id">
      <Route index element={<ParticipantDetail />} />
      <Route path=":id">
        <Route path="edit-invoice" element={<InvoiceUpdate />}/>
      </Route>
      <Route path="invoice" element={<ParticipantInvoiceUpdate />} />
      <Route path="edit" element={<ParticipantUpdate />} />
      <Route path="delete" element={<ParticipantDeleteDialog />} />
    </Route>
  </ErrorBoundaryRoutes>
);

发票路由

const InvoiceRoutes = () => (
  <ErrorBoundaryRoutes>
    <Route index element={<Invoice />} />
    <Route path=":id">
      <Route index element={<InvoiceDetail />} />
      <Route path="delete" element={<InvoiceDeleteDialog />} />
      <Route path="payment" element={<InvoicePaidDialog />} />
    </Route>
  </ErrorBoundaryRoutes>
);

问题原因及解决办法 #

问题1：详情页未出现在历史记录 #

原因：两次跳转都使用了replace={true}，该属性会替换当前历史记录条目而非新增。从列表到详情页用replace会覆盖列表页记录，再从详情到编辑页用replace又覆盖详情页记录，最终历史记录里无详情页条目。

解决：移除不必要的replace={true}，从列表到详情页使用默认的push逻辑（新增历史记录）：

<Link to='participant/xxx-guid'>Detail</Link>

问题2：提交后跳转错误 #

原因：路由配置中嵌套了重复的:id参数，导致发票编辑页的实际路径层级混乱；同时详情页到编辑页的Link路径写得冗余，不符合相对路径规则。

解决：

1. 修正路由结构，将重复的:id改为语义化的:invoiceId，避免参数冲突：

const ParticipantRoutes = () => (
  <ErrorBoundaryRoutes>
    <Route index element={<Participant />} />
    <Route path="new" element={<ParticipantUpdate />} />
    <Route path=":participantId">
      <Route index element={<ParticipantDetail />} />
      <Route path=":invoiceId/edit-invoice" element={<InvoiceUpdate />}/>
      <Route path="invoice" element={<ParticipantInvoiceUpdate />} />
      <Route path="edit" element={<ParticipantUpdate />} />
      <Route path="delete" element={<ParticipantDeleteDialog />} />
    </Route>
  </ErrorBoundaryRoutes>
);

2. 修正详情页到编辑页的Link路径，使用正确的相对路径：

<Link to='yyy-guid/edit-invoice'>Edit Invoice</Link>

3. 表单提交后跳转时，移除replace={true}（除非需要覆盖当前编辑页记录），确保路径匹配正确：

navigate(`/participant/xxx-guid`);

内容的提问来源于stack exchange，提问作者Dork Programmer