react-router-dom配置嵌套路由时的问题

出现问题的代码：

const element = useRoutes([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "/componentLife",
        element: <ComponentLife />,
      },
      {
        path: "/game",
        element: <Game />,
      },
    ],
  },
  { path: "*", element: <NoMatch /> },
]);

return ( {element} )

这样配置路由是没有问题的，但是路由改变不会引起页面的变化，如图：

原因：
组件的使用会导致无法区分路由的children导致嵌套路由失效。

解决方法：
将组件换成组件即可