useRoutes

摘要

<Routes> 的 Hook 版本，使用对象而非组件。这些对象的属性与组件的 props 相同。useRoutes 的返回值要么是可用于渲染路由树的有效 React 元素，要么是在没有匹配项时为 null。

import { useRoutes } from "react-router";

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

  return element;
}

签名

function useRoutes(
  routes: RouteObject[],
  locationArg?: Partial<Location> | string,
): React.ReactElement | null

参数

routes

一个定义了路由层级结构的 RouteObject 数组。

locationArg

一个可选的 Location 对象或路径名字符串，用于替代当前的 Location。

一个用于渲染匹配路由的 React 元素，如果没有路由匹配，则为 null。