useRouteLoaderData and layout Route

[elmeerr]

Hi,

I am migrating a Remix app to React v7 and I am trying to configure routes properly. I have a page that on Remix was setup like this (file system based routing using folders)

task (layout)
task._index (page)

inside of task._index I had useRouteLoaderData("routes/task") and this would give me the data from task loader when I access localhost:3000/task

loader:

export const loader = async ({ request }: LoaderFunctionArgs) => {
 /// Remix
 return defer(<promise>)
/// RR v7 
 return <promise>
}

on RR v7 I setup the same structure like this:

...prefix("/task", [
    layout("routes/task/layout.tsx", [
      index("routes/task/home/home.tsx"),
    ]),
  ]),

and now useRouteLoaderData("routes/task") returns undefined...would someone be able to tell me what am I doing wrong?

ps.: tried using parent structure too but same result

  route("/task", "routes/task/layout.tsx", [
    // child routes
    index("routes/task/home/home.tsx"),
  ]),

[elmeerr]

figure out: I was confused by previous syntax and thought the route ID was based on routes + url path while it is based on file path

So, instead of routes/task I should be using routes/task/layout to be able to get the data :)