mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-24 13:44:54 +00:00
3.8 KiB
3.8 KiB
Route Fix for Published App
Problem
When publishing the app to a static hosting service (like GitHub Pages), accessing the root URL / results in "Cannot GET /" error. This happens because:
- The app uses React Router for client-side routing
- Static hosting servers don't understand client-side routes
- When a user accesses
/, the server looks for a physical file at that path - The server returns 404 because there's no file matching that route
Solution Applied
1. Created public/_redirects File
This file tells compatible static hosts (Netlify, Render, etc.) to redirect all routes to index.html:
/* /index.html 200
2. Created public/404.html
For hosts like GitHub Pages that use a 404 page, this file captures the route and stores it in sessionStorage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Redirecting...</title>
<script>
sessionStorage.redirect = location.href;
</script>
<meta http-equiv="refresh" content="0;URL='/'" />
</head>
<body>
<p>Redirecting...</p>
</body>
</html>
3. Updated index.html
Added a script to restore the route from sessionStorage after the redirect:
<script>
(function() {
var redirect = sessionStorage.redirect;
delete sessionStorage.redirect;
if (redirect && redirect !== location.href) {
history.replaceState(null, null, redirect);
}
})();
</script>
How It Works
- User accesses
https://your-app.github.io/dashboard - GitHub Pages returns 404 (no physical file at that path)
- GitHub Pages serves
404.htmlinstead 404.htmlstores the URL in sessionStorage and redirects to/index.htmlloads with the React app- The script in
index.htmlreads sessionStorage and updates the URL - React Router sees
/dashboardin the URL and renders the correct route
Enhanced Console Logging
Added comprehensive trace logging throughout the initialization flow:
App Initialization (App.tsx)
- Current URL, pathname, search, hash
- Seed data loading progress
- App ready state
- Component preloading status
Route Configuration (routes.tsx)
- Enabled pages list with details
- Root page detection
- Route creation with paths
Router Provider (RouterProvider.tsx)
- Feature toggles state
- State and action context keys
- Routes memo updates
- Individual route rendering
Page Loader (page-loader.ts)
- Page configuration loading
- Enabled pages filtering
- Props resolution for each state/action
- Keyboard shortcuts configuration
Verification
To verify the fix works:
- Build the app:
npm run build - Serve the
distfolder with a static server - Navigate to
/- should load the home page - Navigate to
/dashboard- should load dashboard - Refresh on
/dashboard- should stay on dashboard (not 404)
Trace Console Output
You can now trace the full initialization flow in the browser console:
[INIT] 🚀 main.tsx starting - BEGIN
[INIT] 📦 Importing React DOM
[INIT] ✅ React DOM imported
...
[APP] 🚀 App component initializing
[APP] 🌐 Current URL: https://...
[APP] 📍 Current pathname: /
...
[ROUTES] 🏗️ Creating routes with feature toggles
[ROUTES] 📄 Enabled pages count: 24
[ROUTES] 🏠 Root page search result: Found: home (ProjectDashboard)
...
[ROUTER_PROVIDER] 🎨 Rendering 25 routes
[ROUTER_PROVIDER] 🛣️ Rendering route: /dashboard
[ROUTER_PROVIDER] 🛣️ Rendering route: /code
...
Additional Notes
- The root route
/is configured insrc/config/pages.jsonwith"isRoot": true - The home page uses the
ProjectDashboardcomponent - All routes are dynamically generated from the JSON configuration
- The console logs include emojis and structured prefixes for easy filtering