如何在无循环依赖的RTK Query服务中获取React Router v6路由对象？

一、打破循环依赖的几种可行方案 #

1. 抽离路由匹配逻辑为独立工具模块 #

把原本在service.js中依赖routes.js的路由匹配逻辑，单独放到一个无组件依赖的工具文件中，切断service与routes的直接关联：

// src/utils/route-matcher.js
import { matchRoutes } from 'react-router-dom';
import routes from '../routes';

// 判断路径是否属于SPA路由
export const isSpaRoute = (path) => {
  const matches = matchRoutes(routes, { pathname: path });
  return !!matches;
};

修改service.js，导入这个工具函数替代直接导入routes.js：

// src/service.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { isSpaRoute } from './utils/route-matcher';

export const dataApi = createApi({
  reducerPath: 'dataApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getData: builder.query({
      query: (path) => {
        const baseUrl = isSpaRoute(path) ? '' : '/legacy-app';
        return `${baseUrl}${path}`;
      },
    }),
  }),
});

export const { useGetDataQuery } = dataApi;

这种方式将路由匹配逻辑与API服务解耦，避免了service.js直接依赖routes.js，从而打破循环链。

2. 动态导入路由配置 #

在service.js中不静态导入routes.js，而是在查询逻辑中动态加载，跳过初始化阶段的依赖绑定：

// src/service.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const dataApi = createApi({
  reducerPath: 'dataApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getData: builder.query({
      async queryFn(path) {
        // 动态加载路由配置与匹配方法
        const { default: routes } = await import('./routes');
        const { matchRoutes } = await import('react-router-dom');
        
        const matches = matchRoutes(routes, { pathname: path });
        const baseUrl = matches ? '' : '/legacy-app';
        
        // 手动发起请求完成查询逻辑
        const response = await fetch(`${baseUrl}${path}`);
        const data = await response.json();
        return { data };
      },
    }),
  }),
});

export const { useGetDataQuery } = dataApi;

动态导入会将路由配置的加载延迟到实际查询时，从根源上避免静态导入形成的循环依赖。

3. 抽离纯路由路径配置 #

如果routes.js中包含大量组件导入，可以把仅包含路径的纯数据抽离出来，让service.js只依赖这个无组件的纯数据文件：

// src/config/route-paths.js
export const routePaths = [
  { path: '/dashboard' },
  { path: '/profile' },
  // 其他SPA路由路径
];

修改routes.js，基于纯路径数据补充组件信息：

// src/routes.js
import { routePaths } from './config/route-paths';
import Dashboard from './pages/Dashboard';
import Profile from './pages/Profile';

const routes = routePaths.map(item => {
  switch(item.path) {
    case '/dashboard':
      return { ...item, element: <Dashboard /> };
    case '/profile':
      return { ...item, element: <Profile /> };
    default:
      return item;
  }
});

export default routes;

最后在service.js中导入route-paths.js，自己实现简单的路径匹配（或结合matchRoutes）：

// src/service.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { routePaths } from './config/route-paths';

const isSpaRoute = (path) => {
  return routePaths.some(item => item.path === path);
};

export const dataApi = createApi({
  // 其余配置不变
  endpoints: (builder) => ({
    getData: builder.query({
      query: (path) => {
        const baseUrl = isSpaRoute(path) ? '' : '/legacy-app';
        return `${baseUrl}${path}`;
      },
    }),
  }),
});

二、React Router v6获取路由对象的自定义方案 #

React Router v6没有直接暴露内部路由对象的Hook，但可以通过以下方式实现类似需求：

1. 自定义Hook通过上下文传递路由配置 #

创建一个上下文Provider，将路由配置注入全局，再通过自定义Hook获取：

// src/hooks/useRoutesConfig.js
import { createContext, useContext } from 'react';
import routes from '../routes';

const RoutesContext = createContext(routes);

export const RoutesProvider = ({ children }) => {
  return (
    <RoutesContext.Provider value={routes}>
      {children}
    </RoutesContext.Provider>
  );
};

export const useRoutesConfig = () => {
  return useContext(RoutesContext);
};

在App入口包裹Provider：

// src/App.js
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import { RoutesProvider } from './hooks/useRoutesConfig';
import routes from './routes';

const router = createBrowserRouter(routes);

function App() {
  return (
    <RoutesProvider>
      <RouterProvider router={router} />
    </RoutesProvider>
  );
}

export default App;

之后在任意组件或工具中，都可以通过useRoutesConfig获取完整路由配置：

import { useRoutesConfig } from './hooks/useRoutesConfig';
import { matchRoutes } from 'react-router-dom';

function SomeComponent() {
  const routes = useRoutesConfig();
  
  const checkSpaRoute = (path) => {
    return !!matchRoutes(routes, { pathname: path });
  };
  
  // 使用匹配逻辑
  return <div>...</div>;
}

2. 使用useMatches获取当前匹配路由 #

如果只需要当前页面的路由信息，可以用useMatches Hook获取当前匹配的路由数组：

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

function CurrentRouteInfo() {
  const matches = useMatches();
  // matches数组包含当前层级所有匹配的路由对象，含pathname、element等信息
  console.log('当前匹配路由:', matches);
  return <div>...</div>;
}

注意这个Hook只能获取当前已激活的路由，无法判断任意路径是否属于SPA路由。

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