React Router v6 使用参数导航

Question

目前，我在实现React Router v6（使用6.3.0）时遇到问题 假设我有如下所示的路由

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>
);

当我访问 URL 上定义的

ParticipantInvoiceUpdate

时，问题就出现了，比如

.../participant/*some-guid-participant*/*some-guid-participant-invoice*/edit-invoice

此页面具有向某些服务提交一些数据的行为，当接受服务器的响应时，我使用导航功能导航回 ParticipantDetail 元素。

navigate('/participant/${*some-guid-participant*}');

但它不起作用，我尝试了一些东西，但似乎它只能导航到没有给出任何参数的元素。类似的东西

navigate('/participant');

或

navigate('/invoice);

我也尝试过使用

generatePath

功能并将其与导航结合起来，但仍然没有成功

navigate(generatePath('/participant/:id',{id: participantId}), {replace:true});

请帮助了解我是否遗漏了什么或误解了这个概念。

Answer 1

根据您的代码，路线：

.../participant/*some-guid-participant*/*some-guid-participant-invoice*/edit-invoice

指组件

InvoiceUpdate

而不是

ParticipantInvoiceUpdate

此外，使用字符串格式时不要忘记将

'

更改为 ` :

navigate(`/participant/${some-guid-participant}`);