useRoutes

useRoutes是组件Routes和Route对应的程序化实现。useRoutes提供了通过JSON格式数据进行路由结构的程序化定义方法。它在调用之后回返回一个React.ReactElement，跟直接使用Routes和Route组件定义出来的React元素是一样的，但是相比使用JSX语法定义路由结构，程序化的定义方式可以更加自由和动态。

跟之前的章节一样，先来看一下useRoutes的函数签名。

interface RouteObject {
  caseSensitive?: boolean;
  children?: RouteObject[];
  element?: React.ReactNode;
  index?: boolean;
  path?: string;
}

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

这样就可以在应用中使用程序化的方式重新定义一遍之前章节中出现过的嵌套路由结构。

function AppRoutes() {
  let routes = useRoutes([
    { path: '/', element: <Home /> },
    {
      path: '/things',
      element: <Things />,
      children: [
        { path: ':id', element: <Thing /> },
        { path: 'new', element: <NewThing /> }
      ]
    },
    {
      path: '/tasks',
      element: <Tasks />,
      children: [
        { path: ':id', element: <Task /> },
        { path: 'new', element: <NewTask /> },
        {path: 'delete/confirm' element: <ConfirmDeleteTask />}
      ]
    }
  ]);

  return routes;
}

读者可以将这个示例与之前章节中的嵌套路由定义进行一下定义形式的对比。