React-router多重嵌套路由

直接上代码：

const routerAr = [
    {
        path: '/login',
        element: <Login />
    }, {
        path: "/",
        element: <Home />,
        isLogin: true,
        children: [
            {
                path: 'dataScreen',
                element: <DataScreen />,
                children:[
                    {
                        path: '',
                        element: <ChildrenOne />
                    },{
                        path: 'childrenone',
                        element: <ChildrenOne />
                    },{
                        path: 'childrentwo',
                        element: <ChildrenTwo />
                    }
                ]
            }, {
                path: '',
                element: <Navigate to="dataScreen" />
            }, {
                path: 'energySaving',
                element: <EnergySaving />
            }
        ]
    }
]

const routerMp = () => {
    return (
        <Routes>
            {routerAr.map(item => (
                <Route
                    path={item.path}
                    element={item.isLogin ? <RouterAuth {...item} /> : item.element}
                    key={item.path}
                >
                    {item.children && item.children.map(child => (
                        <Route
                            path={child.path}
                            element={child.element}
                            key={child.path}
                        >
                            {child.children && child.children.map(grandChild => (
                                <Route
                                    path={grandChild.path}
                                    element={grandChild.element}
                                    key={grandChild.path}
                                 />
                            ))}
                        </Route>
                    ))}
                </Route>
            ))}
        </Routes>)
}

const routerElement = routerMp();


export default routerElement;

或者写一个递归函数：

const routerDg = (item) => {
    return item.map((route) => {
      if (route.children) {
        return (
          <Route
            key={route.path}
            path={route.path}
            element={route.isLogin ? <RouterAuth {...route} /> : route.element}
          >
            {routerDg(route.children)}
          </Route>
        );
      } else {
        return <Route key={route.path} path={route.path} element={route.isLogin ? <RouterAuth {...route} /> : route.element}/>;
      }
    });
  };

const newRouters = (
    <Routes>
        {routerDg(routerAr)}
    </Routes>
);