Is it recommended to extend the RouteObject?

[Grapedge]

In ReactRouter v5 and before, we can extend the routing configuration object and add some routing metadata to provide access to third-party libraries.

const routes = [{
  component: <App />,
  path: "/",
  meta: {
    // ... some data here
  }
}]

In Vue Router, there has a meta field can do this: Route Meta Fields in Vue

If we render through the config of RouteObject, is it recommended to extend the object (add meta fields)?

interface MyRouteObject extends RouteObject {
  meta: any
}
const routes: MyRouteObject = [{
  element: <App />,
  meta: {
    // Describe routing here, 
    // Passing to the element will cause us to need Context API or Redux to share data
  }
}]

[javin9]

这是我的方法

export interface IMenuNode {
  // 标题
  title: string;
  // 路径
  menuPath: string;
  // 子节点
  menuChildren: IMenuNode[];
}

export interface IRouteSettings extends RouteObject {
  children?: IRouteSettings[];
  meta?: {
    // 标题
    title?: string;
    [propName: string]: any;
  };
}

/**
 * 路由注册
 */
export const routes: IRouteSettings[] = [
  {
    path: "/",
    index: true,
    element: <HomePage />,
    meta: {
      title: "首页",
    },
  },
  {
    path: "/courses",
    element: <CoursesLayoutPage />,
    meta: {
      title: "课程管理",
    },
    children: [
      {
        index: true,
        element: <CoursesIndexPage />,
        meta: {
          title: "课程列表",
        },
      },
      {
        path: "/courses/:id",
        element: <CoursesDetailPage />,
      },
      {
        path: "/courses/users",
        element: <CoursesUserPage />,
        meta: {
          title: "课程用户",
        },
      },
    ],
  },
  { path: "*", element: <NotFound /> },
];

/**
 * 获取菜单列表
 */
export const getMenuList = (routes: IRouteSettings[]) => {
  return routes
    .filter((item) => item.meta && item.meta.title)
    .map((item) => extractMenuNode(item, null));
};

/**
 * 提取菜单节点
 * @param route {IRouteSettings}
 * @param parent {IRouteSettings|null}
 * @returns IMenuNode
 */
export function extractMenuNode(
  route: IRouteSettings,
  parent: IRouteSettings | null
): IMenuNode {
  const { meta, children = [], index = false, path } = route;
  const title = meta?.title || "未知";
  const menuPath = (index && parent ? parent.path : path) as string;

  const menuChildren = children
    .filter((item) => item.meta && item.meta.title)
    .map((item) => extractMenuNode(item, route));

  return {
    title,
    menuPath,
    menuChildren,
  };
}