React Router中如何通过ID匹配嵌套路由并生成完整路径？

• 核心说明：useMatches只能获取当前已匹配的路由栈，无法直接定位任意ID的未访问路由。更实用的方式是结合路由配置，通过递归遍历（类似你现有的DFS逻辑）找到目标路由及所有父级路由，拼接得到完整路径；若路由含参数，可借助React Router的generatePath处理参数占位符。

• 具体实现步骤：

  1. 编写递归函数遍历路由配置，根据ID获取完整路径：

     const getFullPathById = (routes, targetId, parentPaths = []) => {
       for (const route of routes) {
         if (route.id === targetId) {
           return [...parentPaths, route.path].join('/');
         }
         if (route.children) {
           const matchedPath = getFullPathById(route.children, targetId, [...parentPaths, route.path]);
           if (matchedPath) return matchedPath;
         }
       }
       return null;
     }
     

  2. 处理带参数的路由（如/users/:userId）：

     import { generatePath } from 'react-router-dom';
     
     // 假设目标路由的path为"users/:userId"、ID为"2"
     const basePath = getFullPathById(routes, "2");
     const fullPath = generatePath(basePath, { userId: 123 });
     

  3. 调用navigate完成跳转：

     const navigate = useNavigate();
     const handleMenuClick = (menuId) => {
       const fullPath = getFullPathById(routes, menuId);
       if (fullPath) {
         navigate(`/${fullPath}`);
       }
     }
     

• 关于useMatches的补充：
  只有当目标路由已处于当前匹配栈中（比如同层级页面跳转），才可以通过useMatches获取已匹配的路由信息来拼接路径，但这种场景局限性大，无法覆盖未访问路由的匹配需求。

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