main (6.24.1)dev


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 />

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>.

  <Route path="/" element={<Dashboard />}>
      element={<DashboardMessages />}
    <Route path="tasks" element={<DashboardTasks />} />
  <Route path="about" element={<AboutPage />} />
Docs and examples CC 4.0