MagicRouterOutlet class

A widget that renders nested route content.

Use this inside layout widgets (shells) to display the current child route content. It's similar to:

• Laravel's @yield('content') in Blade templates
• Vue Router's <router-view>
• Angular's <router-outlet>

Usage

class DashboardLayout extends StatelessWidget {
  const DashboardLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Dashboard')),
      body: Row(
        children: [
          NavigationRail(...),
          Expanded(
            child: MagicRouterOutlet(), // Child routes render here
          ),
        ],
      ),
    );
  }
}

Then define your layout route:

Route.layout(
  builder: (child) => DashboardLayout(child: child),
  routes: [
    Route.get('/dashboard', DashboardHome.new),
    Route.get('/profile', ProfilePage.new),
  ],
);