`<Routes>`

在应用程序中的任何位置渲染，<Routes> 将从当前位置匹配一组子路由。

interface RoutesProps {
  children?: React.ReactNode;
  location?: Partial<Location> | string;
}

<Routes location>
  <Route />
</Routes>;

如果您使用的是数据路由器，例如 createBrowserRouter，则很少使用此组件，因为作为后代 <Routes> 树的一部分定义的路由无法利用数据 API 可用于 RouterProvider 应用程序。您可以并且应该在您的 RouterProvider 应用程序中使用此组件在您迁移时。

每当位置发生变化时，<Routes> 会查看其所有子路由以找到最佳匹配项，并渲染 UI 的该分支。<Route> 元素可以嵌套以指示嵌套 UI，这也对应于嵌套的 URL 路径。父路由通过渲染 <Outlet> 来渲染其子路由。

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