使用react-router-dom，如何在Page组件中获取子路由路径列表？

针对你给出的React Router v6嵌套路由配置，有两种实用方式获取子路由的路径列表：

方法一：将路由抽转为配置数组（推荐） #

把原本写在<Routes>里的路由结构抽成配置对象数组，这样在任意组件里都能直接访问并提取子路由路径：

// 单独的路由配置文件（比如routes.js）
export const routes = [
  {
    path: 'Page',
    element: <Page />,
    children: [
      { path: 'subPage1', element: <SubPage1 /> },
      { path: 'subPage2', element: <SubPage2 /> },
      { path: 'subPage3', element: <SubPage3 /> },
      { path: 'subPage4', element: <SubPage4 /> },
    ]
  }
];

// 在App组件中使用这个配置
import { routes } from './routes';
import { useRoutes } from 'react-router-dom';

function App() {
  const element = useRoutes(routes);
  return element;
}

// 在Page组件中获取子路由路径
import { routes } from './routes';

function Page() {
  // 定位到Page对应的路由配置
  const pageRoute = routes.find(route => route.path === 'Page');
  // 提取所有子路由的路径
  const subPaths = pageRoute.children.map(child => child.path);
  // subPaths 结果为 ['subPage1', 'subPage2', 'subPage3', 'subPage4']
  
  return <div>{/* 组件内容 */}</div>;
}

方法二：使用useMatches钩子（无需修改现有路由写法） #

React Router v6提供的useMatches钩子会返回当前所有匹配的路由层级信息，你可以从中筛选出Page路由对应的子路由：

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

function Page() {
  const matches = useMatches();
  // 找到当前Page对应的匹配项
  const pageMatch = matches.find(match => match.pathname.includes('/Page'));
  // 提取子路由路径列表
  const subPaths = pageMatch?.children?.map(child => child.path) || [];
  // subPaths 结果同上
  
  return <div>{/* 组件内容 */}</div>;
}

注意：如果路由层级更复杂，useMatches返回的匹配项是从根路由到当前路由的顺序，需要根据实际结构调整筛选逻辑。

内容的提问来源于stack exchange，提问作者Pa3k.m