React Router v6中如何通过RouteObject的id实现路由导航？

我正在使用React Router v6，目前知道可以通过路径直接导航，比如：

router.navigate('frontend/collection/1234xyz')

但我希望能实现类似router.navigateById('editColletion', {collectionId: '1234xyz'})的功能——通过路由配置里的id属性来跳转，同时传入路径参数。

我知道RouteObject可以设置id属性，但官方文档里没说明这个属性的具体用途和用法，以下是我的Router初始化代码：

import { Suspense } from 'react';
import { lazy } from 'react';
import { createBrowserRouter } from 'react-router-dom';
import { RouteObject } from 'react-router-dom';

...

public static getRouter(): Router {
    const Layout = lazy(() => import('app/views/Layout.r'));
    const HomePage = lazy(() => import('app/views/pages/HomePage.r'));
    const CollectionListPage = lazy(() => import('app/views/pages/CollectionListPage.r'));
    const CollectionPage = lazy(() => import('app/views/pages/CollectionPage.r'));

    const suspenseElement: JSX.Element = <>...</>
    const routes: RouteObject[] = [
        {
            path: '/frontend',
            element: <Suspense fallback={suspenseElement}><Layout /></Suspense>,
            children: [
                {
                    path: '',
                    element: <Suspense fallback={suspenseElement}><HomePage /></Suspense>,
                },
                {
                    id: 'home',
                    path: 'home',
                    element: <Suspense fallback={suspenseElement}><HomePage /></Suspense>,
                },
                {
                    id: 'listtColletion',
                    path: 'collections',
                    element: <Suspense fallback={suspenseElement}><CollectionListPage /></Suspense>,
                },
                {
                    id: 'editColletion',
                    path: 'collection/:collectionId?',
                    element: <Suspense fallback={suspenseElement}><CollectionPage /></Suspense>,
                },
            ],
        },
    ];

    const router: Router = createBrowserRouter(routes);
    return router;
}

解决方案：自定义实现navigateById功能 #

React Router v6本身并没有内置navigateById方法，但我们可以基于现有的路由配置自己封装这个功能。RouteObject的id属性主要用于内部路由匹配标识（比如useMatches返回的结果会包含该id），官方没有开放直接通过id导航的API，所以需要手动实现路由查找和路径生成逻辑。

步骤1：编写路由查找与路径生成工具函数

我们需要递归查找指定id的路由，并拼接父路由路径，同时替换路径参数：

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

// 递归查找带指定id的路由，并返回完整路径和路由对象
function findRouteWithFullPath(
  routes: RouteObject[],
  targetId: string,
  parentPath = ''
): { route: RouteObject; fullPath: string } | undefined {
  for (const route of routes) {
    // 拼接当前路由的完整路径
    const currentPath = parentPath 
      ? `${parentPath}/${route.path}`.replace(/\/+/g, '/') 
      : route.path;

    // 找到目标id的路由
    if (route.id === targetId) {
      return { route, fullPath: currentPath };
    }

    // 递归查找子路由
    if (route.children) {
      const foundChild = findRouteWithFullPath(route.children, targetId, currentPath);
      if (foundChild) return foundChild;
    }
  }
  return undefined;
}

// 根据路由id和参数生成可导航的完整路径
export function generatePathById(
  routes: RouteObject[],
  routeId: string,
  params?: Record<string, string>
): string {
  const routeInfo = findRouteWithFullPath(routes, routeId);
  
  if (!routeInfo) {
    throw new Error(`未找到id为${routeId}的路由配置`);
  }

  let { fullPath } = routeInfo;

  // 替换路径中的参数（包括可选参数:param?）
  if (params) {
    Object.entries(params).forEach(([key, value]) => {
      fullPath = fullPath
        .replace(`:${key}?`, value)
        .replace(`:${key}`, value);
    });
  }

  // 清理多余斜杠，确保路径格式正确
  return fullPath.replace(/\/+/g, '/');
}

步骤2：封装自定义导航方法

你可以直接在router实例上封装navigateById，或者写一个React Hook在组件中使用：

方式1：基于router实例封装

// 假设你已经有全局的routes配置和router实例
export function navigateById(routeId: string, params?: Record<string, string>) {
  const path = generatePathById(routes, routeId, params);
  router.navigate(path);
}

// 使用示例
navigateById('editColletion', { collectionId: '1234xyz' });

方式2：自定义Hook（组件内使用）

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

export function useNavigateById(routes: RouteObject[]) {
  const navigate = useNavigate();

  return (routeId: string, params?: Record<string, string>) => {
    const path = generatePathById(routes, routeId, params);
    navigate(path);
  };
}

// 在组件中使用
function MyComponent() {
  const navigateById = useNavigateById(routes);
  
  const handleEdit = () => {
    navigateById('editColletion', { collectionId: '1234xyz' });
  };

  return <button onClick={handleEdit}>编辑集合</button>;
}

内容的提问来源于stack exchange，提问作者Arno van Oordt