React Router 6：配置路由实现父组件FieldFormats通过Outlet传props给子组件

核心思路 #

要让FieldFormats的列表数据传给FieldFormat，关键是正确配置嵌套路由，并通过React Router的Outlet上下文传递数据。之前子组件不渲染大概率是路由嵌套结构没搭对，或者Outlet的使用方式有误。

具体实现步骤 #

1. 调整路由配置

把/fieldformats设为父路由，嵌套/fieldformats/:id子路由，确保访问子路径时父组件会先渲染，再通过Outlet渲染子组件。

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import FieldFormats from './FieldFormats';
import FieldFormat from './FieldFormat';

const router = createBrowserRouter([
  {
    path: '/fieldformats',
    element: <FieldFormats />,
    loader: async () => {
      // 调用你的getFieldFormats获取数据
      const fieldFormats = await getFieldFormats();
      return fieldFormats;
    },
    // 嵌套子路由
    children: [
      {
        path: ':id',
        element: <FieldFormat />,
        loader: ({ params }) => {
          // 返回params供子组件使用
          return params;
        },
      },
    ],
  },
]);

// 根组件挂载路由
function App() {
  return <RouterProvider router={router} />;
}

2. 在父组件FieldFormats中传递数据

用useLoaderData拿到列表数据，然后通过Outlet的context属性把数据传给子组件，同时要确保父组件里渲染Outlet，子组件才有挂载的位置。

import { Outlet, useLoaderData } from 'react-router-dom';

function FieldFormats() {
  const fieldFormats = useLoaderData();

  return (
    <div>
      {/* 父组件自身的列表展示 */}
      <h2>所有字段格式</h2>
      <ul>
        {fieldFormats.map(format => (
          <li key={format.id}>
            <a href={`/fieldformats/${format.id}`}>{format.name}</a>
          </li>
        ))}
      </ul>
      {/* 通过context传递数据给子组件 */}
      <Outlet context={fieldFormats} />
    </div>
  );
}

3. 在子组件FieldFormat中接收数据

用useOutletContext获取父组件传递的列表数据，再结合useParams拿到id，就能定位到对应的数据项。

import { useOutletContext, useParams } from 'react-router-dom';

function FieldFormat() {
  const fieldFormats = useOutletContext();
  const { id } = useParams();
  
  // 匹配对应id的数据项
  const currentFormat = fieldFormats.find(format => format.id === id);

  if (!currentFormat) {
    return <div>未找到该字段格式</div>;
  }

  return (
    <div>
      <h3>字段格式详情：{currentFormat.name}</h3>
      <p>描述：{currentFormat.description}</p>
      {/* 其他详情内容 */}
    </div>
  );
}

常见问题排查 #

• 如果子组件仍不渲染，检查路由嵌套是否正确：子路由必须放在父路由的children数组里，子路由路径只需写:id，无需重复/fieldformats。
• 确保父组件里渲染了<Outlet />，没有Outlet的话子组件没有挂载节点。
• 数据传递失败时，确认useLoaderData在父组件中能正确获取数据，且Outlet的context属性已传入对应值。

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