React Router v6子路由中useMatches获取handle为undefined问题问询

问题场景 #

使用 React Router v6 + createBrowserRouter，通过路由的handle属性生成面包屑数据，路由配置如下：

const router = createBrowserRouter([
  {
    path: "/",
    element: <Login />,
  },
  {
    path: "/app",
    children: [
      {
        element: <RequireUserAuth />,
        children: [
          {
            element: <Layout />,
            children: [
              {
                index: true,
                element: <Dashboard />,
                handle: {
                  crumb: { text: "some crumb text", capitalize: false },
                },
              },
              {
                path: ":project",
                element: <RequireProjectParameter />,
                children: [
                  {
                    index: true,
                    element: <ProjectGeneral />,
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
]);

问题现象 #

• 访问/app（Dashboard页面）时，调用useMatches能正常获取到对应路由的handle数据；
• 访问/app/some-project（ProjectGeneral页面）或其他子页面时，useMatches返回结果中/app对应的路由项的handle为undefined。

原因分析 #

你把handle属性加在了**/app下的index路由**上，而非/app父路由本身：

• 访问/app时，路由匹配链会包含那个带handle的index路由，所以能拿到对应数据；
• 访问/app/some-project时，匹配的路由链里没有这个index路由，自然获取不到对应的handle。

子路由本身是可以获取父路由的handle的，但前提是handle必须定义在父路由节点上，而不是父路由下的某个子路由（比如index路由）。

解决方案 #

把handle属性移到/app路由本身，或者你希望作为面包屑父节点的路由上，示例如下：

const router = createBrowserRouter([
  {
    path: "/",
    element: <Login />,
  },
  {
    path: "/app",
    // 将handle移至/app父路由
    handle: {
      crumb: { text: "some crumb text", capitalize: false },
    },
    children: [
      {
        element: <RequireUserAuth />,
        children: [
          {
            element: <Layout />,
            children: [
              {
                index: true,
                element: <Dashboard />,
              },
              {
                path: ":project",
                element: <RequireProjectParameter />,
                children: [
                  {
                    index: true,
                    element: <ProjectGeneral />,
                    // 可给子路由添加handle用于面包屑层级
                    handle: {
                      crumb: { text: "项目详情", capitalize: true },
                    },
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
]);

调整后，无论访问/app还是/app/some-project，useMatches返回的路由链都会包含/app路由项，即可正常获取到它的handle。

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