layout-wrapper-components

To create layout wrappers for protected and public routes, build reusable PrivateLayout and PublicLayout components that render nested routes using Outlet, with token-based authentication checks applied as route guards in your router configuration.

The best way to structure authentication guards and conditional sidebars is using a PrivateLayout wrapper that decrypts tokens, verifies access, and renders nested routes with a responsive sidebar for your admin panel or CRM.

To configure nested routes with separate layouts, wire PrivateLayout and PublicLayout into your React Router configuration, rendering child routes through the Outlet component to enforce access levels across protected and public portals.

Yes, this layout wrapper pattern works with React Router v6+ by leveraging the Outlet component for nested route rendering, applying standardized token checks, and scaffolding consistent layout structures for both public and private pages.

You need a separate PublicLayout wrapper because public pages require a lightweight, consistent structure without authentication guards or conditional sidebars, preventing repetitive boilerplate when scaffolding public portals versus protected dashboard areas.