如何向Layout组件传递Props以动态设置页面标题？

1. 完善Layout组件的Props定义 #

首先给Layout组件添加类型声明，接收可选的title参数并设置默认值，避免无标题时出现错误：

// Layout.tsx
import { Outlet } from 'react-router-dom';
import Footer from './Footer';

type LayoutProps = {
  title?: string; // *可选参数，防止未传标题时报错*
};

export default function Layout({ title = '默认标题' }: LayoutProps) {
  return (
    <>
      <h1>{title}</h1>
      <main>
        <Outlet />
      </main>
      <Footer />
    </>
  );
}

2. 方式一：路由配置中直接传递标题 #

如果希望标题由路由统一管理，修改routes.ts，给每个路由添加props字段，将标题传递给Layout：

// routes.ts
export default [
  layout('./layouts/Layout.tsx', [
    index('./pages/index.tsx', { title: '首页' }),
    route('product', './pages/product.tsx', { title: '产品列表' }),
    route('contact', './pages/contact.tsx', { title: '联系我们' }),
    // 配置about页面的标题
    route('about', './pages/about.tsx', { title: '关于我们' }),
  ]),
] satisfies RouteConfig;

3. 方式二：页面组件自身提供标题 #

如果希望标题由页面组件自主定义，无需在路由中重复配置，可使用React Router的useOutletContext传递数据：

3.1 改造Layout组件读取上下文标题 #

// Layout.tsx
import { Outlet, useOutletContext } from 'react-router-dom';
import Footer from './Footer';

type PageTitleContext = {
  pageTitle?: string;
};

export default function Layout() {
  const { pageTitle = '默认标题' } = useOutletContext<PageTitleContext>();
  return (
    <>
      <h1>{pageTitle}</h1>
      <main>
        <Outlet />
      </main>
      <Footer />
    </>
  );
}

3.2 在页面组件中设置标题 #

以about.tsx为例，通过上下文传递页面标题：

// about.tsx
import { useOutletContext } from 'react-router-dom';

type PageTitleContext = {
  pageTitle?: string;
};

export default function AboutPage() {
  useOutletContext<PageTitleContext>({ pageTitle: '关于我们' });
  
  return (
    <>
      <h2>Who are we</h2>
    </>
  );
}

两种方式都能实现动态设置Layout标题，页面内容会从<main>元素开始正常展示。

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