React与React Router DOM中布局页面同级组件props传递方法

方法一：通过路由配置的meta字段传递标题（推荐） #

这种方式能把页面标题统一管理在路由配置中，不用在组件里单独传props，逻辑更清晰。

1. 修改路由配置，为目标路由添加meta字段存储标题：

const router = createBrowserRouter([
  {
    element: (
      <>
        <GlobalStyles />
        <MainLayout />
      </>
    ),
    children: [
      {
        path: '/',
        element: <Dashboard />,
        meta: { title: 'Dashboard' } // 将标题存入路由元信息
      }
    ]
  }
]);

2. 在Header组件中用useMatches钩子获取当前路由的meta信息：

import { useMatches } from 'react-router-dom';

export default function Header() {
  const matches = useMatches();
  // 取最内层的路由匹配项，提取标题
  const currentRoute = matches[matches.length - 1];
  const pageTitle = currentRoute?.meta?.title || '默认标题';

  return (
    <header>
      <h1>{pageTitle}</h1>
    </header>
  );
}

方法二：通过Outlet上下文动态传递标题（适合动态场景） #

如果标题需要根据组件内的状态动态变化（比如从接口获取的标题），可以用这种方式：

1. 修改MainLayout，用状态管理标题，并把更新函数通过Outlet上下文传给子组件：

import { Outlet } from 'react-router-dom';
import { useState } from 'react';

export default function MainLayout() {
  const [pageTitle, setPageTitle] = useState('默认标题');

  return (
    <>
      <Header title={pageTitle} />
      <Outlet context={{ setPageTitle }} />
    </>
  );
}

2. 在Dashboard组件中接收上下文并设置标题：

import { useOutletContext } from 'react-router-dom';
import { useEffect } from 'react';

export default function Dashboard() {
  const { setPageTitle } = useOutletContext();
  
  // 组件挂载时设置标题，也可根据组件内状态动态更新
  useEffect(() => {
    setPageTitle('Dashboard');
    return () => setPageTitle('默认标题'); // 可选：组件卸载时重置标题
  }, [setPageTitle]);

  return (
    <div>
      {/* Dashboard内容 */}
    </div>
  );
}

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