如何向React高阶组件传递MetaTags属性优化路由页面封装？

解决withPage高阶组件获取meta的问题 #

你遇到的HOC无法获取meta的核心问题，大概率是没将meta作为参数传入HOC的构造函数。正确的HOC写法应该是让withPage先接收meta配置，再接收页面组件，最终返回被Page包裹的组件：

// 定义MetaTags类型
type MetaTags = {
  title: string;
  description?: string;
  // 按需添加其他meta字段
};

// 实现withPage高阶组件
const withPage = (meta: MetaTags) => (Component: React.ComponentType) => {
  return (props: React.PropsWithChildren) => {
    return <Page meta={meta}><Component {...props} /></Page>;
  };
};

// 使用示例
const AboutPageWithMeta = withPage({ 
  title: '关于我们', 
  description: '这是网站的关于页面' 
})(AboutPage);

// 路由配置
<Route path='/about' element={<AboutPageWithMeta />} />

这种写法下，meta会被HOC捕获并传递给Page组件，同时保留页面组件的props传递能力。

比HOC更优的替代方案 #

1. 自定义PageRoute组件 #

直接扩展React Router的Route组件，封装meta和页面组件的关联逻辑，写法更直观：

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

type PageRouteProps = Omit<React.ComponentProps<typeof Route>, 'element'> & {
  meta: MetaTags;
  component: React.ComponentType;
};

const PageRoute = ({ meta, component: Component, ...rest }: PageRouteProps) => {
  return (
    <Route
      {...rest}
      element={<Page meta={meta}><Component /></Page>}
    />
  );
};

// 路由中直接使用
<PageRoute 
  path='/about' 
  meta={{ title: '关于我们' }} 
  component={AboutPage} 
/>

这种方案和原生Route的使用习惯一致，无需额外创建包装后的页面组件，维护成本更低。

2. 结合React Router Loader实现动态Meta #

如果你的meta需要动态生成（比如从接口获取页面标题），可以利用React Router的loader机制，将meta数据与路由绑定：

// Page组件中通过useLoaderData获取meta
import { useLoaderData } from 'react-router-dom';

const Page = ({ children }: { children: React.ReactNode }) => {
  const { meta } = useLoaderData() as { meta: MetaTags };
  
  // 渲染meta标签（可根据需求扩展）
  return (
    <>
      <title>{meta.title}</title>
      {meta.description && (
        <meta name="description" content={meta.description} />
      )}
      {children}
    </>
  );
};

// 路由配置
<Route 
  path='/about' 
  element={<Page><AboutPage /></Page>}
  loader={() => {
    // 这里可以替换为接口请求逻辑
    return { meta: { title: '关于我们', description: '动态生成的描述' } };
  }}
/>

这种方案完全复用React Router的原生能力，适合需要动态获取meta的场景，同时避免了额外的组件封装。

方案对比 #

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