Remix框架中useLoaderData无法获取最近路由Loader数据求助

你这里的核心问题是对useLoaderData的作用范围理解有误：它仅会返回当前路由自身定义的loader数据，而布局路由（example.tsx）的loader数据无法直接通过它获取。

要获取父级布局路由的loader数据，你需要使用Remix提供的useRouteLoaderData钩子，它允许你通过指定路由ID来获取对应路由的loader结果。

修改后的代码示例 #

调整example._index.tsx的代码如下：

import { useRouteLoaderData, Link } from "@remix-run/react";

export default function ExampleIndex() {
  // 路由ID对应app/routes下的文件路径，这里example.tsx的ID是"routes/example"
  const layoutData = useRouteLoaderData<{ message: string }>("routes/example");

  // 加空值判断避免潜在报错
  if (!layoutData) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Example Index {layoutData.message}</h1>
      <Link to="/example/finish">Finish</Link>
    </div>
  );
}

补充说明 #

• 路由ID的规则：默认是路由文件相对于app/routes目录的路径，比如app/routes/example.tsx对应ID为"routes/example"，app/routes/example._index.tsx对应"routes/example._index"。
• 如果子路由（比如example._index.tsx）自己定义了loader，useLoaderData会返回该子路由loader的结果，布局路由的loader数据依然需要通过useRouteLoaderData获取。

内容的提问来源于stack exchange，提问作者akmur