React-Router useRoutes()

钩子在useRoutes功能上等同于<Routes>，但它里面使用 JavaScript 对象而不是<Route>元素来定义您的路由。<Route>这些对象具有与普通元素相同的属性，但它们不需要 JSX。

• useRoutes()的参数为有组件对象组成的数组。

• useRoutes的返回值要么是可用于渲染路由树的有效 React 元素，要么null是不匹配的元素。

• 嵌套路由用 children 实现。

let element = useRoutes([
  {
    path:" ",
    element: < />,
    children:[
      {
         path:" ",
         element: < />,
      },
      ildren:[
      {
         path:" ",
         element: < />,
      },
    ],
  },
  {
     path:" ",
     element: < />,
  },
]
);

import * as React from "react";
import { useRoutes } from "react-router-dom";

function App() {
  let element = useRoutes([
    {
      path: "/",
      element: <Dashboard />,
      children: [
        {
          path: "messages",
          element: <DashboardMessages />,
        },
        { path: "tasks", element: <DashboardTasks /> },
      ],
    },
    { path: "team", element: <AboutPage /> },
  ]);

  return element;
}

如果用 < Routes> 和 < Route> 实现该效果，代码如下：

<Routes>
  <Route path="/" element={<Dashboard />}>
    <Route
      path="messages"
      element={<DashboardMessages />}
    />
    <Route path="tasks" element={<DashboardTasks />} />
  </Route>
  <Route path="about" element={<AboutPage />} />
</Routes>