Switching language in sub-routes with dynamic routes throws an error

[alveshelio]

Description

When we have a dynamic route my-route/[id] and a sub-route my-route/my-sub-route, when trying to switch language in page my-route/my-sub-route the locale switcher throws this error

I believe the reason why this is happening is because when we define pathnames like so

xport const pathnames = {
  '/': '/',
  '/pathnames': {
    en: '/pathnames',
    de: '/pfadnamen'
  },
  '/customer/[id]': {
    en: '/customer/[id]',
    de: '/customer-de/[id]'
  },
  '/customer/add': {
    en: '/customer/add',
    de: 'customer/hinzufuegen'
  }
} satisfies Pathnames<typeof locales>;

Then when we are in route /en/customer/add and switch the locale, the pathname in the locale switcher is /customer/[id] and it expects to receive a param id. When using usePathname from next/navigation it returns the proper pathname: /customer/add.

Verifications

• I've verified that the problem I'm experiencing isn't covered in the docs.
• I've searched for similar, existing issues on GitHub and Stack Overflow.
• I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://codesandbox.io/p/devbox/next-intl-bug-template-app-forked-nfv7yp?workspaceId=7a31ce6f-12de-4f1b-b2c1-f8810166a680&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clxvydnja00083b6nlrqh1810%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clxvydnja00033b6nda7xquec%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clxvydnja00053b6no0utbzh0%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clxvydnja00073b6npscbzknx%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clxvydnja00033b6nda7xquec%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxvydnja00023b6n2bzqw4cy%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A12%252C%2522startColumn%2522%253A24%252C%2522endLineNumber%2522%253A12%252C%2522endColumn%2522%253A24%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fconfig.ts%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clxw047lc00023b6npwhrpygk%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A9%252C%2522startColumn%2522%253A57%252C%2522endLineNumber%2522%253A9%252C%2522endColumn%2522%253A57%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fapp%252F%255Blocale%255D%252Fcustomer%252Fadd%252Fpage.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clxvydnja00033b6nda7xquec%2522%252C%2522activeTabId%2522%253A%2522clxw047lc00023b6npwhrpygk%2522%257D%252C%2522clxvydnja00073b6npscbzknx%2522%253A%257B%2522id%2522%253A%2522clxvydnja00073b6npscbzknx%2522%252C%2522activeTabId%2522%253A%2522clxw049g900093b6n058qkiae%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxvydnja00063b6nk0jozvbu%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A3000%252C%2522path%2522%253A%2522%252Fen%252Fcustomer%252Fadd%2522%257D%252C%257B%2522type%2522%253A%2522DOCS%2522%252C%2522path%2522%253A%2522%252Feditors%252Fweb%252Fvscode-web%2522%252C%2522id%2522%253A%2522clxw049g900083b6nxi3gkpxo%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522DOCS%2522%252C%2522path%2522%253A%2522%252Feditors%252Fweb%252Fvscode-web%2522%252C%2522id%2522%253A%2522clxw049g900093b6n058qkiae%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522clxvydnja00053b6no0utbzh0%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxvydnja00043b6ntxptn5fw%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522id%2522%253A%2522clxvydnja00053b6no0utbzh0%2522%252C%2522activeTabId%2522%253A%2522clxvydnja00043b6ntxptn5fw%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Reproduction description

Steps to reproduce:

1. Open reproduction
2. Click on link "Add Customer"
3. Switch locale from "English" to "German"
4. You should see the error.

Expected behaviour

I would expect usePathname() to return the proper pathname.

[amannn]

Thanks for the great bug report! A fix is coming up in #1152

[amannn]

Btw., there's a typo in your example:

-    de: 'customer-de/hinzufuegen'
+    de: '/customer-de/hinzufuegen'

After this fix, it works now!

[amannn]

You might want to consider passing params in the locale switcher so this component also works on the customer route with the dynamic segment:

next-intl/examples/example-app-router/src/components/LocaleSwitcherSelect.tsx

Line 31 in 5596ae8

{pathname, params},

[alveshelio]

You might want to consider passing params in the locale switcher so this component also works on the customer route with the dynamic segment:

next-intl/examples/example-app-router/src/components/LocaleSwitcherSelect.tsx

Line 31 in 5596ae8

{pathname, params},

Thank you very much for the quick fix.
By the way, that's what I'm doing, I'm already passing params to the locale switcher. However, because in this route example my-route/my-sub-route/ the only param that is passed is locale and because useParams() was returning this pathname my-route/[id] then it was expecting param id.

[alveshelio]

@amannn I just wanted to thank you for being so fast to handle this and to confirm that with the last update it solved the issue.

[amannn]

Awesome, glad to help! 🙌