# ProtectedRoutes

A placeholder indicating where in the routing tree should the protected routes be rendered. The ProtectedRoutes placeholder concept is similar to React Router's outlet, it's a pipeline to inject routes at a predetermined location.

A protected route is a route with a "protected" visibility that is not hoisted or nested with either a parentPath or parentId option.

<ProtectedRoutes />

None

The route defining the ProtectedRoutes placeholder must be hoisted; otherwise, there will be an infinite loop as the ProtectedRoutes placeholder will render within itself.

import { ProtectedRoutes } from "@squide/firefly";
import { RootLayout } from "./RootLayout.tsx";

runtime.registerRoute({
    // Pathless route to declare a root layout.
    element: <RootLayout />,
    children: [
        ProtectedRoutes
    ]
}, {
    hoist: true
});