SPA Subdomain Root Render Without Redirect

Problem

When building subdomain-based routing (e.g., username.example.com), using React Router's <Navigate to="/profile/username" replace /> changes the URL, which defeats the purpose of having a clean subdomain URL. Additionally, the target component may show a blank page if it relies on useParams() to get route parameters that don't exist at /.

Context / Trigger Conditions

• •Subdomain profile page redirects to /profile/npub1... instead of serving content at /
• •Page appears blank (no content loads) on subdomain root
• •Component uses useParams() and fails when rendered at a route without those params
• •Edge worker injects user data into window.__SUBDOMAIN_USER__ or similar global
• •Want username.domain.com/ to render like a personal website

Solution

1. Router: Render Component Directly Instead of Navigate

Before (causes redirect + URL change):

<Route path="/" element={
  subdomainUser
    ? <Navigate to={`/profile/${subdomainUser.npub}`} replace />
    : <Index />
} />

After (renders at / without URL change):

<Route path="/" element={
  subdomainUser
    ? <ProfilePage />
    : <Index />
} />

2. Component: Add Fallback Data Source

The component must check for injected subdomain data when route params are missing.

Before (only checks route params):

export function ProfilePage() {
  const { npub } = useParams<{ npub?: string }>();
  const identifier = npub;

  if (!identifier) {
    return <Error message="No user identifier provided" />;
  }
  // ... rest of component
}

After (falls back to injected data):

import { getSubdomainUser } from '@/hooks/useSubdomainUser';

export function ProfilePage() {
  const { npub } = useParams<{ npub?: string }>();
  const subdomainUser = getSubdomainUser();

  // Route param takes priority, subdomain data is fallback
  const identifier = npub || subdomainUser?.npub;

  if (!identifier) {
    return <Error message="No user identifier provided" />;
  }
  // ... rest of component
}

3. Edge Worker: Inject User Data into HTML

The edge worker (Fastly Compute, Cloudflare Workers, etc.) should inject user data:

// In edge worker handling subdomain
const userData = await fetchUserData(username);
const html = await fetchSpaHtml();

const injectedHtml = html.replace(
  '</head>',
  `<script>window.__DIVINE_USER__ = ${JSON.stringify(userData)};</script></head>`
);

return new Response(injectedHtml, { headers: { 'content-type': 'text/html' } });

4. Client-Side Data Access

// useSubdomainUser.ts
interface SubdomainUser {
  subdomain: string;
  pubkey: string;
  npub: string;
  username?: string;
  displayName?: string;
  // ... other fields
}

export function getSubdomainUser(): SubdomainUser | null {
  if (typeof window === 'undefined') return null;
  return (window as any).__DIVINE_USER__ || null;
}

Verification

1. •Visit username.domain.com/ - URL should stay at /, not redirect
2. •Profile content should load correctly
3. •Check browser console for no errors about missing identifiers
4. •Verify window.__DIVINE_USER__ contains expected data in devtools

Example

For divine-web:

• •thecomedianriley.divine.video/ renders ProfilePage at /
• •ProfilePage checks useParams() first (empty at /)
• •Falls back to getSubdomainUser()?.npub from injected data
• •Profile loads without URL change

Notes

• •This pattern requires coordination between edge worker and client code
• •Edge worker must inject data before SPA hydration
• •Always check route params first for normal /profile/:npub routes to work
• •Consider SEO: the edge worker should also set appropriate meta tags
• •Links on the subdomain can use SmartLink component to stay local for owner's content but link to apex domain for other users' content

References

• •React Router v6 Routes: https://reactrouter.com/en/main/route/route
• •Fastly Compute@Edge: https://developer.fastly.com/learning/compute/