Javascript 反应-映射到子级的新道具从高阶组件中返回未定义

我正在尝试创建一个HOC，它将API路由注入到我的组件中，这样我就不需要每次在父组件中发出获取请求时都定义它们。当前映射到子级的道具在调用时是未定义的。以下是我迄今为止的尝试：

我最终作为道具通过HOC传递的文件：

import { blog_routes } from '../api/blog/blog';
import { fetch_config } from './fetch_config/fetch_config';

export const routes = {
  fetch_config,
  blog: blog_routes
};

高阶组件

的路径

：

    import React from 'react';
    const api = require('../../api/index');

    const GlobalApiRoutes = Component => {
      return class InjectApiRoutes extends React.Component {
        render() {
          return <Component api={api.routes} {...this.props} />;
        }
      };
    };

export default GlobalApiRoutes;

下面是使用

页面的
博客
组件：

import React, { useState, useEffect } from 'react';

import Page from '../../Layout/Page';

const Blog = props => {
  console.log(props.api);
  return (
    <Page pageTitle="Blog">
      <h1>Hello</h1>
    </Page>
  );
};

export default Blog;

import React，{useState，useffect}来自“React”；
从“../../Layout/Page”导入页面；
const Blog=props=>{
console.log（props.api）；
返回(
你好
);
};
导出默认博客；

我的问题是，在我的
博客
组件中，我没有在
页面
中添加的
api
道具。它返回为未定义的

我知道我在这里遗漏了什么，但我不知道那是什么。提前感谢您的帮助
 您所展示的模式可能被认为是
上下文
的用途-您在树的几层上有一个组件，您希望一个孩子访问一些东西。您还没有展示您在哪里呈现博客-它需要是
页面
的一个直接的孩子。老实说，看起来这是一个非常复杂的设置。它们是静态路由，只需在需要的地方导入即可。扔掉这些东西。等一下，
Blog
是页面的
parent
？页面基本上已经将这些api道具添加到了
h1
元素中。看起来你真正想做的是
globalapirotes（Blog）
而不是
globalapirotes（Page）
@Adam是的，它应该围绕Blog而不是页面。我想我的措辞不是最好的。页面只是设置默认页面布局的布局组件。Blog在内部使用Page，所以是的，在这种情况下Blog将是父对象。我觉得佩奇是我的父母，这让我很困惑。谢谢你的评论！
import React, { useState, useEffect } from 'react';

import Page from '../../Layout/Page';

const Blog = props => {
  console.log(props.api);
  return (
    <Page pageTitle="Blog">
      <h1>Hello</h1>
    </Page>
  );
};

export default Blog;