React Router v6 中使用useRouteLoaderData，获取访问父路由或兄弟路由的由 loader 函数加载的数据

useRouteLoaderData 是 React Router v6 中的一个 Hook，用于在组件中访问由 loader 函数加载的数据。这个 Hook 主要用于在嵌套路由中访问父路由或兄弟路由的加载数据。

作用

1. 访问父路由的加载数据：

   • 在嵌套路由中，子路由可以使用 useRouteLoaderData 访问父路由的加载数据。
   • 这对于需要在子路由中使用父路由数据的场景非常有用。

2. 访问兄弟路由的加载数据：

   • 在复杂的路由结构中，一个路由可能需要访问另一个路由的加载数据。
   • useRouteLoaderData 允许你在当前路由中访问其他路由的加载数据。

使用方法

useRouteLoaderData 的签名如下：

const data = useRouteLoaderData(routeId);

• routeId：要访问的路由的唯一标识符，通常是路由的 path 或者 id。

示例

假设你有一个应用，包含一个根路由和一个子路由，每个路由都有一个 loader 函数来加载数据。

定义 loader 函数

// rootLoader.js
export async function rootLoader() {
  const response = await fetch('https://api.example.com/root-data');
  if (!response.ok) {
    throw new Error('Failed to fetch root data');
  }
  return response.json();
}

// teamLoader.js
export async function teamLoader() {
  const response = await fetch('https://api.example.com/team-data');
  if (!response.ok) {
    throw new Error('Failed to fetch team data');
  }
  return response.json();
}

import { createBrowserRouter } from 'react-router-dom';
import Root from './components/Root';
import Team from './components/Team';
import { rootLoader } from './loaders/rootLoader';
import { teamLoader } from './loaders/teamLoader';

const router = createBrowserRouter([
  {
    path: '/',
    id: 'root', // 为根路由指定一个唯一的 id
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: 'team',
        id: 'team', // 为子路由指定一个唯一的 id
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]);

export default router;

使用 useRouteLoaderData 钩子

在子路由组件中使用 useRouteLoaderData 访问父路由的加载数据。

// Team.js
import React from 'react';
import { useLoaderData, useRouteLoaderData } from 'react-router-dom';

const Team = () => {
  const teamData = useLoaderData(); // 获取当前路由的加载数据
  const rootData = useRouteLoaderData('root'); // 获取父路由的加载数据

  return (
    <div>
      <h1>Team Component</h1>
      <h2>Team Data:</h2>
      <pre>{JSON.stringify(teamData, null, 2)}</pre>
      <h2>Root Data:</h2>
      <pre>{JSON.stringify(rootData, null, 2)}</pre>
    </div>
  );
};

export default Team;

详细解释

1. 定义 loader 函数：

   • rootLoader 和 teamLoader 是异步函数，使用 fetch 从服务器获取数据。
   • 如果请求失败，抛出一个错误，React Router 会捕获这个错误并显示错误页面（如果你配置了错误边界）。

2. 创建路由器：

   • 使用 createBrowserRouter 创建路由器。
   • 为根路由和子路由分别指定 loader 函数，并为每个路由指定一个唯一的 id。

3. 使用 useRouteLoaderData 钩子：

   • 在 Team 组件中，使用 useLoaderData 获取当前路由的加载数据。
   • 使用 useRouteLoaderData 获取父路由的加载数据，传入父路由的 id（即 'root'）。