<Routes>

Rendered anywhere in the app, <Routes> will match a set of child routes from the current location.

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

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

If you're using a data router like createBrowserRouter it is uncommon to use this component as routes defined as part of a descendant <Routes> tree cannot leverage the Data APIs available to RouterProvider apps. You can and should use this component within your RouterProvider application while you are migrating.

Whenever the location changes, <Routes> looks through all its child routes to find the best match and renders that branch of the UI. <Route> elements may be nested to indicate nested UI, which also correspond to nested URL paths. Parent routes render their child routes by rendering an <Outlet>.

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