Astro + Cloudflare Pages: Slug being appended to current URL results in 404

For Workes & Pages, what is the name of the domain?

https://astro-micro-7t1.pages.dev/

What is the issue or error you’re encountering

The PostNavigation component at the bottom of blog posts is broken. It seems like it’s appending the href to the current URL. For example, when inspected the PostNavigation link has an href of “01-getting-started”. When rendered, it links to https://astro-micro-7t1.pages.dev/00-micro-changelog/01-getting-started instead of linking to https://astro-micro-7t1.pages.dev/01-getting-started.

What steps have you taken to resolve the issue?

Deployments on Vercel and Netlify do not have this issue. Inspecting the link shows the href being passed is correct, but somehow the actual link that gets rendered is different. I tried updating the site in astro.config.mjs to match the deployed Cloudflare URL, but this had no effect.

The intended behaviour can be viewed at https://astro-micro.vercel.app.

What are the steps to reproduce the issue?

  1. Fork and deploy the astro-micro template: https://github.com/trevortylerlee/astro-micro
  2. Go to any post and scroll to the bottom where the PostNavigation links are. Click one and you will be redirected to a 404.

Screenshot of the error

That’s how a tags work, you’d want /01-getting-started to serve /01-getting-started. Not having a slash appends
This is standard HTML behaviour.

You can see the example one is doing it right:

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.