`<Routes>`

<Routes> 會在應用程式中任何地方渲染，它會從目前的位置比對一系列下層路由。

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

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

如果你正在使用資料路由器，例如 createBrowserRouter，不建議使用這個組件，因為身為後代 <Routes> 樹狀結構一部分的定義路由無法使用數據 API，這對 RouterProvider 應用程式可用。在你遷移期間，你可以而且應該在你的 RouterProvider 應用程式中使用這個組件。

每當位置改變時，<Routes> 會檢查它所有的下層路由，找到最佳比對並渲染 UI 的那個分支。<Route> 元素可以巢狀表示巢狀 UI，這些 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>