Nested router not matched.

[Virgil-N]

What version of React Router are you using?

6

Steps to Reproduce

const nestRouter: Array<RouteObject> = [
  {
    path: "nest/*",
    element: lazyLoad(React.lazy(() =>
      import("@/views/nest/index"))),
    errorElement: <DefaultError />,
    meta: {
      title: "nest",
      key: "nest",
      roles: [],
      requireAuth: false,
    },
    children: [
      {
        path: "nest1/*",
        element: lazyLoad(React.lazy(() =>
          import("@/views/nest/nest1/index"))),
        // element: <Outlet />,
        errorElement: <DefaultError />,
        meta: {
          title: "nest1",
          key: "nest1",
          roles: [],
          requireAuth: false,
        },
        children: [
          {
            path: "nest1_1",
            element: lazyLoad(React.lazy(() =>
              import("@/views/nest/nest1/nest1_1/index"))),
            errorElement: <DefaultError />,
            meta: {
              title: "nest1_1",
              key: "nest1_1",
              roles: [],
              requireAuth: false,
            },
            children: []
          },
          {
            path: "nest1_2",
            element: lazyLoad(React.lazy(() =>
              import("@/views/nest/nest1/nest1_2/index"))),
            errorElement: <DefaultError />,
            meta: {
              title: "nest1_2",
              key: "nest1_2",
              roles: [],
              requireAuth: true,
            },
            children: []
          }
        ]
      },
      {
        path: "nest2",
        element: lazyLoad(React.lazy(() =>
          import("@/views/nest/nest2/index"))),
        errorElement: <DefaultError />,
        meta: {
          title: "nest2",
          key: "nest2",
          roles: [],
          requireAuth: false,
        },
        children: []
      },
    ]
  },
];

Route.tsx

return r.map((v: any) => {
      if (Array.isArray(v.children) && v.children.length > 0) {
        return (
          <Route
            key={v.path}
            path={v.path}
            element={
              <Auth roles={v.meta.roles} requireAuth={v.meta.requireAuth}>
                {v.element}
              </Auth>
            }
            errorElement={v.errorElement}
          >
            {generateRoute(v.children)}
          </Route>
        );
      }
      return (
        <Route
          key={v.path}
          path={v.path}
          element={
            <Auth roles={v.meta.roles} requireAuth={v.meta.requireAuth}>
              {v.element}
            </Auth>
          }
          errorElement={v.errorElement}
        >
        </Route>
      );
    });
  };

+++++++++++
When I locationed to "http://127.0.0.1:3344/nest/nest1/nest1_1", only nest component rendered. But it must be nest1_1 component rendered.

Expected Behavior

nest1_1 component rendered.

Actual Behavior

nest component rendered