关于react-router 6 出现 Maximum update depth exceeded

Question

初学 React Router 6 有个问题让我很迷惑, 如下:

// 运行成功, 浏览器输入 /a 会正常跳转 /a/b 且正常展示
{
    path: "/a",
    element: <Navigate to="/a/b" />, // 重定向到 /a/b 路由
},
{
    path: "/a/b",
    element: <Element />,
},

// 运行失败, 浏览器输入 /a 会正常跳转 /a/b 但会出现冒红
{
    path: "/a",
    element: <Navigate to="/a/b" />, // 重定向到 /a/b 路由
    children: [
        {
            path: "b",
            element: <Element />,
        },
    ]
},

冒红的详细信息如下:

react-dom.development.js:67 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

这让我很迷惑, 希望有大佬能解惑一下, 我希望能做到通过 /a 会自动跳转到 /a/b 并正常渲染, 最好在路由 JSON 格式里面 /b 能在 /a 的 children 下面, 这会方便我进行菜单的渲染

Answer 1

children的path也得写全

{
    path: "/a",
    element: <Navigate to="/a/b" />, // 重定向到 /a/b 路由
    children: [
        {
            path: "/a/b",
            element: <Element />,
        },
    ]
},