Routes

interface RoutesProps {
    children: ReactNode;
    fallback: NonNullable<ReactNode> | null;
}

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

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={<DashboardLayout />}>
        <Route path="messages" element={<DashboardMessages />} />
        <Route path="tasks" element={<DashboardTasks />} />
    </Route>
    <Route path="about" element={<AboutPage />} />
</Routes>

fallback

Defines a React Element to use for all <Route> children by default if none is passed.

<Routes fallback={<Fallback />}>
    <Route path="/about" element={<About />} />
    <Route path="/p/:productId(\d+)" element={<Product />} />
</Routes>