请教一个常见路由场景下的循环依赖问题？

Question

下面是一个路由配置文件route.gen.tsx

import app from "./pages/_app";

export const routes = [
  {
    element: <App />,
    children: [...config, { path: "*", element: <NoMatch /> }],
  },
];

export const { Link, Navigate } = components<Path, Params>();
export const { useNavigate, useParams } = hooks<Path, Params>();

这个文件引入了App组件生成路由配置routes。
App组件是我的页面入口页，我在App组件里配置路由菜单，管理路由跳转，所以又要引入route.gen.tsx文件里的Link，Navigate等方法。
这就导致了两文件的循环依赖，我想了几个解决办法，但是都不够优雅。有比较优雅的方式解决这个场景下的循环依赖问题吗。
补充说明：route.gen.tsx文件是约定式路由插件自动生成的单文件。

Answer 1

你可以将 Link 和 Navigate 方法从 route.gen.tsx 中提取到一个独立的文件中，例如 routing.tsx，然后在 App 组件中引入这个文件来获取这些方法，这样就可以避免循环依赖。