useRoutes是如何使用的？如何使用useRouter进行路由动态加载的？

对标到VUE的API，把router整体作为一个配置

import React, { Suspense, useRef } from "react";
import {
  BrowserRouter,
  Link,
  useLocation,
  Route,
  Routes,
  useNavigate,
  useParams,
  Outlet,
  useRoutes,
} from "react-router-dom";
import List from "./List";

export default function NewRouter() {
  const News = () => {
    const { id } = useParams();
    const { pathname } = useLocation();

    return (
      <div>
        News {id},地址是{pathname}
      </div>
    );
  };
  const User = () => {
    const nav = useNavigate();

    return <div onClick={() => nav("/news/1")}>User</div>;
  };
  const DynamicList = React.lazy(() => import("./List"));
  const Menu = () => (
    <div>
      <div>
        <Link to="/">首页</Link>
        <Link to="/news">新闻</Link>
        <Link to="/user">我的</Link>
      </div>
      <Outlet />
    </div>
  );

  let routes = [
    {
      path: "/",
      element: <Menu />,
      children: [
        {
          path: "/news/:id",
          element: <News />,
        },
        {
          path: "/user",
          element: <User />,
        },
        {
          path: "/list",
          element: (
            <Suspense fallback={<div>loading...</div>}>
              <DynamicList />
            </Suspense>
          ),
        },
      ],
    },
  ];

  const Routering = () => useRoutes(routes);
  return (
    <div>
      <BrowserRouter>
        {/* <Routes>
          <Route path="/" element={<Menu />}>
            <Route index element={<div>首页</div>} />
            <Route path="user" element={<User />} />
            <Route path="news/:id" element={<News />} />
          </Route>
        </Routes> */}
        <Routering />
      </BrowserRouter>
    </div>
  );
}