reactjsreact-router

React useDataLoader() always return 'undefined'

Route

{
  path: "/",
  element: <Mi />,
  children: [
    {
      path: "/:id",
      loader: async ({ params }) => {
        return "WHY NOT WORKING";
      },
      element: <User />,
    },
  ],
},

User.TSX

export default function User({ id }: any) {
  const data = useLoaderData();
  
  useEffect(() => {
    // Get the artist details
    console.log(data);
  }, [data]);

  console.log(data);

  return (
    <></>
  );
}

I get the param id as expected. However, useLoaderData() never returns the value. I testes with the String but even then it is returning undefined value.

How can I get the loader value on the <User />?

Solution

  • I had the same issue. Adding an index route to the children of the parent fixed it. So I think you need to add an index route to the children of the Mi route.