Edit components of sub-route nested resources

Question

I'm trying to use custom routing with nested resources. Request is a "real" resource for a table on the database, while Participants is a "virtual" resource that references the request_details table.

I have the following:

<Admin dataProvider={dataProvider}>
    <Resource name="requests" list={RequestsList} create={NewRequest} edit={EditRequest} >
        <Route path=":reqID/participants" element={<ReqParticipantsList />} />
        <Route path=":reqID/participant/:partID" element={<ReqParticipantsEdit />} />
    </Resource>
</Admin>

When I go to /requests/11/participants, the following code is loaded for the ReqParticipantsList component and everything works fine:

<ListBase resource="request_details">

But when I go to /requests/11/participant/205 and the ReqParticipantsEdit component's code contains

<EditBase resource="request_details">

I am redirected to /request_details with an error (obviously).

In the ReqParticipantsEdit component, I tried using Edit, EditBase, ResourceContextProvider, but nothing seemed to work. If I use simple paragraphs to "record"

<p>{`Request ID: ${reqID}, Participant ID: ${partID}`}</p>

Correctly returns 2 values ​​(reqID and partID)

Where did I go wrong?

Answer 1

If I understand correctly, I think you want:

and