low-code-react-app-b/docs/ROUTER_QUICK_START.md

Quick Start: Enabling React Router

This guide shows you how to enable route-based code splitting with React Router in under 2 minutes.

Step 1: Enable Router Mode

Edit src/config/app.config.ts:

export const APP_CONFIG = {
  useRouter: true,  // Change from false to true
  // ... rest of config
}

Step 2: Reload the App

That's it! The app will now use:

• React Router for navigation
• URL-based routing (/dashboard, /code, etc.)
• Route-based code splitting
• Browser back/forward buttons

What Changes?

Before (Tabs Mode)

• Navigation via tab state
• All components loaded upfront
• No URL changes when navigating
• ~2.5MB initial bundle

After (Router Mode)

• Navigation via React Router
• Components lazy-loaded per route
• URLs like /dashboard, /models
• ~1.2MB initial bundle (52% smaller!)
• Routes loaded on-demand

Verify It's Working

1. Check Console Logs

Look for router-specific logs:

[APP_ROUTER] 🚀 App.router.tsx loading - BEGIN
[ROUTES] 🛣️ Routes configuration loading
[ROUTER_PROVIDER] 🏗️ Creating routes

2. Check URLs

Navigate between pages - URLs should change:

http://localhost:5000/dashboard
http://localhost:5000/code
http://localhost:5000/models

3. Check Network Tab

Open DevTools Network tab:

• Clear network log
• Navigate to a new page
• See route-specific chunks loading

4. Check Bundle Size

Open DevTools Coverage or Lighthouse:

• Initial JavaScript: ~1.2MB (down from ~2.5MB)
• Per-route chunks: 50-200KB each

Keyboard Shortcuts

Still work! But now they navigate via router:

• Ctrl+1 → /dashboard
• Ctrl+2 → /code
• Ctrl+3 → /models
• etc.

Switching Back

To disable router mode, set useRouter: false in app.config.ts.

Troubleshooting

Components not loading?

1. Check ComponentRegistry - all components registered?
2. Check pages.json - pages enabled?
3. Check console for error logs

URLs not changing?

1. Verify useRouter: true in config
2. Check BrowserRouter is wrapping app
3. Clear cache and hard reload

Performance not improved?

1. Open Network tab - see chunks loading?
2. Check Coverage tab - see code splitting?
3. Disable cache in DevTools

Next Steps

• Read REACT_ROUTER_INTEGRATION.md for detailed docs
• Check console logs to understand loading flow
• Experiment with navigation
• Measure bundle size improvements

Need Help?

Check the logs! Every significant action is logged:

[ROUTES] 📝 Configuring route for page: dashboard
[APP_ROUTER] 🚀 Navigating to: models
[USE_ROUTER_NAVIGATION] 📍 Current path: models

Filter by tag:

• [ROUTES] - Route configuration
• [APP_ROUTER] - App lifecycle
• [ROUTER_PROVIDER] - Route rendering
• [USE_ROUTER_NAVIGATION] - Navigation events