React useDataLoader() 总是返回“undefined”

Question

路线

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

用户.TSX

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

  console.log(data);

  return (
    <></>
  );
}

我按照预期得到了参数

id

。但是，

useLoaderData()

永远不会返回该值。我用字符串进行测试，但即使这样它也会返回

undefined

值。

如何获取

loader

上的

<User />

值？

Answer 1

我也有同样的问题。向父级的子级添加索引路由修复了这个问题。所以我认为你需要为 Mi 路由的子路由添加一个索引路由。