React router v6 获取所有路由

Question

假设我有一个 url 路径“clients/devices/2”，路由定义如下：

 <Routes>
    <Route path="/" element={<Layout />}>
      <Route path="clients" element={<Clients />} />
      <Route path="devices" element={<Devices />}>
        <Route path=":deviceId" element={<Device />} />
      </Route>
    </Route>
 </Routes>

现在，我位于上述网址“clients/devices/2”，我想获取所有涉及的路由的数组，如下所示：

[
  {
    element: <Layout />,
    path: "/",
    children: [
     {
       path: "Clients",
       element: <Clients />,
     },
    ],
  },
 etc etc
];

有没有办法通过一些本机反应路由器方法来实现这一点？我正在尝试为我的应用程序制作面包屑，我需要这种路线信息。让我感到困惑的是，这样一个关键的功能似乎没有在react-router中实现，或者我错过了什么？

现在我正在使用 useLocation，在其中解析路径名字符串并尝试将其与我创建的某些路由枚举进行匹配，然后从那里开始，但这似乎非常不方便。

解决这个问题的最佳方法是什么？

Answer 1

如何动态创建此数组作为可以迭代和导出的变量？

export const routesList = [
{
    path: '/',
    element: <Layout />,
    children: [
        {
            path: "Clients",
            element: <Clients />,
        },
    ],
}];

在您的路线中渲染它：

{routesList.map((_route, i) => {
    return (
        <Route
            key={i}
            path={_route.path}
            element={_route.element}
        >
            {_route.children && children.map((_childRoute, j) => {
                <Route
                    key={j}
                    path={_childRoute.path}
                    element={_childRoute.element}
                ></Route>
            })}
        </Route>
    );
})}

然后，从任何其他子组件导入它。

import { routesList } from 'ParentComponent';