mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-25 06:04:54 +00:00
132 lines
3.8 KiB
Markdown
132 lines
3.8 KiB
Markdown
# 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:
|
|
|
|
1. The app uses React Router for client-side routing
|
|
2. Static hosting servers don't understand client-side routes
|
|
3. When a user accesses `/`, the server looks for a physical file at that path
|
|
4. 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:
|
|
|
|
```html
|
|
<!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:
|
|
|
|
```html
|
|
<script>
|
|
(function() {
|
|
var redirect = sessionStorage.redirect;
|
|
delete sessionStorage.redirect;
|
|
if (redirect && redirect !== location.href) {
|
|
history.replaceState(null, null, redirect);
|
|
}
|
|
})();
|
|
</script>
|
|
```
|
|
|
|
## How It Works
|
|
|
|
1. User accesses `https://your-app.github.io/dashboard`
|
|
2. GitHub Pages returns 404 (no physical file at that path)
|
|
3. GitHub Pages serves `404.html` instead
|
|
4. `404.html` stores the URL in sessionStorage and redirects to `/`
|
|
5. `index.html` loads with the React app
|
|
6. The script in `index.html` reads sessionStorage and updates the URL
|
|
7. React Router sees `/dashboard` in 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:
|
|
|
|
1. Build the app: `npm run build`
|
|
2. Serve the `dist` folder with a static server
|
|
3. Navigate to `/` - should load the home page
|
|
4. Navigate to `/dashboard` - should load dashboard
|
|
5. 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 in `src/config/pages.json` with `"isRoot": true`
|
|
- The home page uses the `ProjectDashboard` component
|
|
- All routes are dynamically generated from the JSON configuration
|
|
- The console logs include emojis and structured prefixes for easy filtering
|