Why is Astro JS Dynamic Routing returning 404 always on my local dev environment?

Question

I am building an Astro JS application and trying to use the Dynamic Routing as described here, but for some reason, it is not working at all locally and always returns the Astro JS 404 page. This is my code:

---
import Layout from '../layouts/Layout.astro'
const { article } = Astro.params;

export function getStaticPaths() {
    return [
      { params: { article: 'text' } }
    ]
}
---
<Layout title=`Polarix.io | ${article}`>
  <h1 style="color: black">{article}</h1>
</Layout>

I am running my site locally using the npx astro dev command in my terminal, and my target page is [article].astro, which is in src/pages as per the post above.

The URL I am calling in the browser is http://localhost:4321/article/text

Can anyone point me in the right direction?