Router.push takes to incorrect page but refreshing same exact URL opens correct page.

Why this is a good first issue

Dynamic route precedence causes inconsistent behavior between client-side navigation and hard refresh.

AI Summary

The issue involves inconsistent routing behavior where client-side navigation (router.push/Link) shows a different page than a hard refresh for the same URL, likely due to overlapping dynamic route patterns. The solution requires understanding Next.js's route matching precedence, but the exact fix isn't immediately clear from the description. Maintainer comments suggest this might be expected behavior rather than a bug.

Issue Description

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:04:44 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T8103
Binaries:
  Node: 16.18.1
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 13.1.1
  eslint-config-next: 13.1.1
  react: 18.2.0
  react-dom: 18.2.0

Which example does this report relate to?

catch-all-routes

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

For some reason, my dynamic route is rendered instead of catch all route when I use router.push or Link component. But when I refresh the page, the exact same url renders correct catch all route page. Folder layout attached below.

getStaticPath Reference

pages/[category-slug]/[...category-concern-filter-slug]/index.jsx

export async function getStaticPaths(context) {
  let publicationState = context.preview ? "PREVIEW" : "LIVE";

  const { data: consolidatedData } = await gqlClient.query({
    query: getCategoryWiseFilterHabitsConcerns,
    variables: { publicationState: publicationState },
  });

  let combination = {};

  const paths = consolidatedData.categories.data.map((category) => {
    combination[category.attributes.url] = { concerns: [] };
    return category.attributes.concerns.data.map((concern) => {
      combination[category.attributes.url].concerns.push(concern.attributes.url);
      return {
        params: {
          "category-concern-filter-slug": [`shop-by-${category.attributes.url}-concern`, concern.attributes.url],
          "category

GitHub Labels

examples