Reactjs React路由dom布局隐藏内容

我有一个使用REACTION-ROUTER-DOM的项目，但我无法实现拥有一条带有横向菜单的路由.

我需要我的横向菜单在每/users/:id条路由上可用，这样我就可以在关于当前用户的不同信息之间导航.

这就是我要说的:

            <Route path=":id" element={<UserLayout />}>
              <Route
                index
                element={
                  isLoading ? (
                    ""
                  ) : hasPermissionToRoute("/users/:id/") ? (
                    <User />
                  ) : (
                    <AccessForbidden />
                  )
                }
              />
              <Route
                path="contracts"
                element={
                  isLoading ? (
                    ""
                  ) : hasPermissionToRoute("/users/:id/contracts") ? (
                    "contracts"
                  ) : (
                    <AccessForbidden />
                  )
                }
              />
            </Route>

<UserLayout />表示:

export function UserLayout({ children }) {
  return (
    <div className="flex gap-5">
      <div>menu</div>
      <div>{children}</div>
    </div>
  );
}

当我转到/users/id/时，我只显示菜单，/users/id/contracts也是如此.问题不是出于子路由的条件，因为当我删除element={<UserLayout />}时，它工作正常(但没有横向菜单).

如有任何帮助，将不胜感激！