How can I pass state to Nested Resources without using the URL parameters.

[sebinbc]

Hello guys, I'm working with nested resources in React Refine and need to pass additional data from a parent resource to a child resource. I want to avoid using URL parameters for this. Is there a recommended way to achieve this using React Refine's features or hooks?

Specifically, I'm looking for a solution that allows me to pass data as state when navigating to the child resource, similar to how useNavigate works in React Router. Is there an equivalent mechanism within React Refine, or do I need to implement a custom solution?

For instance, if I have a list of 'Projects' and each project has a list of 'Tasks', I want to pass the project's ID and name to the 'Tasks' resource when navigating from the 'Projects' list. I know I can pass the project ID in the URL, but how can I also pass the project name without using URL parameters?

( The reason for why I was trying to do this was to implement a solution for displaying the name of the associated project in the breadcrumb when we access the task inside. )

Any guidance or examples specific to React Refine would be great thanks in advance 😄

[BatuhanW]

Hello @sebinbc

You can use this hook for your case: https://refine.dev/docs/core/hooks/utilities/use-breadcrumb/

I think the best way is to carry it on with route params.

{
  name: "tasks",
  list: "projects/:projectId/tasks",
  show: "projects/:projectId/tasks/:id"
}