[FIX-008] Sandbox Loader Reading Stale URL & Masked Links

📝 Problem Background

1. Stale URL: The Loader runs before the browser's address bar updates, reading the old URL.
2. Masked Link: Links generated on the Docs list page were pointing to /docs/* (a route mask) instead of the specific article path, causing the Loader to receive incorrect input.

🧪 Effort Metrics

• Attempt Count: 5
• Time Spent: 2.5 hours
• Complexity: ⭐⭐⭐⭐ (Compound Failure)

🔍 Root Cause Analysis

Double Fault:

1. Link Generation: TanStack Router, when handling a splat route with path: '/*', sometimes failed to correctly interpolate when using the params object, resulting in a literal * in the generated href.
2. Loader Timing: Even if the link were correct, the Loader could read window.location (the old value) before the hash updates.

🛠️ Fix Strategy

Pincer Movement:

1. Source Correction (Index Page):

   • Abandon using the params object for this case.
   • Build the path using an explicit string template: to={/${lang}/docs/${slug}}.
   • Ensure the Router receives the fully expanded physical path.

2. Endpoint Defense (Loader Page):

   • Abandon window.location.
   • Use the location.pathname from the Loader Context (which represents the Router's intended destination).
   • Combined with the source correction, location.pathname will now contain the correct slug instead of *.

typescript
// Fix 1: Link Generation
<Link to={`/${lang}/docs/${docFile.slug}`} />

// Fix 2: Loader State
loader: ({ location }) => {
  // Now location.pathname is "/en/docs/core/plan" (Correct!)
}

---

Result: Fully resolved the entire chain from list click to detail page load.